@likec4/diagram 1.47.0 → 1.49.0

package/dist/likec4diagram/custom/nodes/NodeNotes.js

@@ -0,0 +1,286 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { hasProp, RichText } from '@likec4/core';
+import { stringHash } from '@likec4/core/utils';
+import { cx, css } from '@likec4/styles/css';
+import { Box } from '@likec4/styles/jsx';
+import { nodeNotes } from '@likec4/styles/recipes';
+import { ScrollAreaAutosize } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { ViewportPortal } from '@xyflow/react';
+import { AnimatePresence, m } from 'motion/react';
+import { isEmptyish, clamp } from 'remeda';
+import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
+import { Markdown } from '../../../base-primitives/Markdown.js';
+import { useOnDiagramEvent } from '../../../hooks/useDiagram.js';
+
+function NodeNotes({ data }) {
+  if (!hasProp(data, "notes") || isEmptyish(data.notes.md || data.notes.txt)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(NodeNotesInternal2, { data });
+}
+function stopPropagation(e) {
+  e.nativeEvent.stopImmediatePropagation();
+  e.stopPropagation();
+}
+function NodeNotesInternal2({ data }) {
+  return /* @__PURE__ */ jsx(NodeNotesInternal, { data });
+}
+function NodeNotesInternal({ data }) {
+  const markdown = data.notes;
+  const width = clamp(data.width ?? 0, {
+    min: 250,
+    max: 500
+  });
+  clamp(data.height ?? 0, {
+    min: 200,
+    max: 600
+  });
+  const [expanded, handlers] = useDisclosure(false, {});
+  const id = stringHash(data.id + (markdown.md ?? markdown.txt));
+  const onClickCapture = useCallbackRef((e) => {
+    if (e) {
+      e.preventDefault();
+      if ("nativeEvent" in e) {
+        e.nativeEvent.stopImmediatePropagation();
+      }
+      e.stopPropagation();
+    }
+    handlers.toggle();
+  });
+  const hovered = data.hovered ?? false;
+  const layoutDependency = expanded;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+      /* @__PURE__ */ jsxs(
+        m.div,
+        {
+          className: cx(
+            "nopan nodrag",
+            nodeNotes({ opened: expanded })
+          ),
+          variants: variants.root,
+          initial: "initial",
+          animate: expanded ? "expanded" : hovered ? "hovered" : "initial",
+          whileHover: "whileHover",
+          exit: "exit",
+          ...!expanded && { onPointerDownCapture: onClickCapture },
+          onMouseDownCapture: onClickCapture,
+          onClickCapture,
+          onClick: stopPropagation,
+          "data-state": expanded ? "expanded" : "collapsed",
+          children: [
+            /* @__PURE__ */ jsx(
+              m.div,
+              {
+                variants: variants.paper1,
+                className: "__paper __paper-back"
+              },
+              "paper-back"
+            ),
+            !expanded && /* @__PURE__ */ jsx(
+              m.div,
+              {
+                layout: true,
+                layoutId: id,
+                variants: variants.paper2,
+                "data-state": expanded ? "expanded" : "collapsed",
+                className: "__paper __paper-front"
+              },
+              id
+            )
+          ]
+        },
+        `node-notes-${id}`
+      ),
+      expanded && /* @__PURE__ */ jsx(ViewportPortal, { children: /* @__PURE__ */ jsx(
+        m.div,
+        {
+          layout: true,
+          layoutDependency,
+          layoutId: id,
+          className: css({
+            position: "absolute",
+            zIndex: 300,
+            top: "0",
+            left: "0",
+            display: "flex",
+            pointerEvents: "all",
+            rounded: "sm",
+            backgroundColor: "likec4.overlay.body",
+            padding: "0",
+            alignItems: "stretch",
+            justifyContent: "stretch",
+            overflow: "hidden",
+            width: "fit-content",
+            height: "fit-content",
+            maxHeight: "70cqh",
+            maxWidth: "50cqw"
+            // minHeight: '60cqh',
+          }),
+          "data-likec4-notes": id,
+          style: {
+            top: data.y + 20,
+            left: data.x + 10,
+            maxWidth: `min(calc(${width}px * 2), 50cqw)`
+            // minHeight: `max(${height}px, 60cqh)`,
+            // maxHeight: height,
+          },
+          onMouseDownCapture: stopPropagation,
+          onClickCapture: stopPropagation,
+          onClick: stopPropagation,
+          children: /* @__PURE__ */ jsx(
+            ScrollAreaAutosize,
+            {
+              component: m.div,
+              className: cx(
+                "nowheel",
+                css({
+                  flex: "1",
+                  padding: "xs",
+                  paddingRight: "xxs"
+                })
+              ),
+              children: /* @__PURE__ */ jsx(
+                Markdown,
+                {
+                  className: css({
+                    paddingRight: "xxs"
+                  }),
+                  value: RichText.from(markdown)
+                }
+              )
+            }
+          )
+        },
+        id
+      ) }, "portal")
+    ] }),
+    expanded && /* @__PURE__ */ jsx(
+      Catch,
+      {
+        data,
+        onCatchClick: onClickCapture
+      }
+    )
+  ] });
+}
+const base_paper1 = {
+  rotateZ: "-5deg",
+  y: 0,
+  x: 1,
+  scale: 1,
+  originX: "55%",
+  originY: "80%"
+};
+const base_paper2 = {
+  rotateZ: "3deg",
+  y: -2,
+  scale: 1,
+  backgroundColor: "color-mix(in oklab, var(--likec4-palette-fill) 8%, #FFF)",
+  originX: "45%",
+  originY: "80%"
+};
+const variants = {
+  root: {
+    initial: {
+      ["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)"
+    },
+    hovered: {},
+    whileHover: {
+      ["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 3%, #FFF)"
+    },
+    exit: {
+      ["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)"
+    }
+  },
+  // PAPER BACK
+  paper1: {
+    initial: {
+      ...base_paper1,
+      rotateZ: "-3.5deg",
+      y: 1,
+      scale: 0.95
+    },
+    hovered: {
+      ...base_paper1
+    },
+    whileHover: {
+      ...base_paper1,
+      ["--paper-bg"]: "color-mix(in oklab, var(--likec4-palette-fill) 3%, #FFF)",
+      scale: 1.04
+    },
+    expanded: {
+      ...base_paper1,
+      y: [0, 1, 20],
+      scale: 0.95
+    },
+    exit: {
+      ...base_paper1,
+      rotateZ: "-3.5deg",
+      y: 1,
+      scale: 0.95
+    }
+  },
+  // PAPER FRONT
+  paper2: {
+    initial: {
+      ...base_paper2,
+      rotateZ: "2deg",
+      y: 2,
+      scale: 0.95,
+      backgroundColor: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)"
+    },
+    hovered: {
+      ...base_paper2
+    },
+    whileHover: {
+      ...base_paper2,
+      scale: 1.08
+    },
+    expanded: {
+      ...base_paper2,
+      y: [0, 1, 20],
+      scale: 0.95
+    },
+    exit: {
+      ...base_paper2,
+      rotateZ: "2deg",
+      y: 2,
+      scale: 0.95,
+      backgroundColor: "color-mix(in oklab, var(--likec4-palette-fill) 50%, #EEE)"
+    }
+  }
+};
+function Catch({
+  data,
+  onCatchClick
+}) {
+  useOnDiagramEvent("paneClick", () => {
+    onCatchClick();
+  });
+  return /* @__PURE__ */ jsx(ViewportPortal, { children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      css: {
+        display: "block",
+        position: "absolute",
+        zIndex: 200,
+        pointerEvents: "all",
+        left: "0",
+        top: "0",
+        cursor: "zoom-out"
+      },
+      style: {
+        transform: `translate(${data.x - 40}px, ${data.y - 40}px)`,
+        width: (data.width ?? 250) + 80,
+        height: (data.height ?? 200) + 80
+      },
+      onMouseDownCapture: onCatchClick,
+      onClickCapture: onCatchClick,
+      onClick: stopPropagation
+    }
+  ) }, "catch-all");
+}
+
+export { NodeNotes };

package/dist/likec4diagram/custom/nodes/SequenceActorNode.js

@@ -6,7 +6,9 @@ import { isTruthy } from 'remeda';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { ElementActions } from './ElementActions.js';
 import { NodeDrifts } from './NodeDrifts.js';
+import { NodeNotes } from './NodeNotes.js';
 import { ElementDetailsButtonWithHandler } from './nodes.js';
+import { ElementToolbar } from './toolbar/ElementToolbar.js';
 import { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
 import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
 import { ElementData } from '../../../base-primitives/element/ElementData.js';
@@ -67,9 +69,9 @@ const ActorStepPort = ({
     )
   ] });
 };
-const hasModelFqn = (data) => isTruthy(data.modelFqn);
+const hasModelFqn = (node) => "modelFqn" in node.data && isTruthy(node.data.modelFqn);
 function SequenceActorNode(props) {
-  const { enableElementDetails, enableCompareWithLatest } = useEnabledFeatures();
+  const { enableElementDetails, enableReadOnly, enableCompareWithLatest, enableNotes } = useEnabledFeatures();
   const data = props.data;
   const {
     id,
@@ -109,10 +111,12 @@ function SequenceActorNode(props) {
       enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
       /* @__PURE__ */ jsx(ElementShape, { ...props }),
       /* @__PURE__ */ jsx(ElementData, { ...props }),
-      hasModelFqn(data) && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(ElementActions, { ...props, data }),
-        enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { id, data })
-      ] })
+      hasModelFqn(props) && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ElementActions, { ...props }),
+        enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { id, data }),
+        !enableReadOnly && /* @__PURE__ */ jsx(ElementToolbar, { ...props })
+      ] }),
+      enableNotes && /* @__PURE__ */ jsx(NodeNotes, { ...props })
     ] }),
     ports.map((p) => /* @__PURE__ */ jsx(ActorStepPort, { port: p, data: props.data }, p.id))
   ] });

package/dist/likec4diagram/custom/nodes/nodes.js

@@ -5,9 +5,11 @@ import '@xstate/react';
 import 'fast-equals';
 import 'react';
 import { useDiagram } from '../../../hooks/safeContext.js';
+import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
 import { CompoundActions } from './CompoundActions.js';
 import { DeploymentElementActions, ElementActions } from './ElementActions.js';
 import { NodeDrifts } from './NodeDrifts.js';
+import { NodeNotes } from './NodeNotes.js';
 import { CompoundDeploymentToolbar, CompoundElementToolbar } from './toolbar/CompoundToolbar.js';
 import { DeploymentElementToolbar, ElementToolbar } from './toolbar/ElementToolbar.js';
 import { CompoundNodeContainer } from '../../../base-primitives/compound/CompoundNodeContainer.js';
@@ -17,9 +19,27 @@ import { CompoundDetailsButton } from '../../../base-primitives/compound/Compoun
 import { ElementNodeContainer } from '../../../base-primitives/element/ElementNodeContainer.js';
 import { ElementShape } from '../../../base-primitives/element/ElementShape.js';
 import { ElementData } from '../../../base-primitives/element/ElementData.js';
-import { ElementTags } from '../../../base-primitives/element/ElementTags.js';
 import { ElementDetailsButton } from '../../../base-primitives/element/ElementDetailsButton.js';
+import { ElementTags as ElementTags$1 } from '../../../base-primitives/element/ElementTags.js';
 
+function ElementTags(props) {
+  const diagram = useDiagram();
+  return /* @__PURE__ */ jsx(
+    ElementTags$1,
+    {
+      onTagClick: useCallbackRef((tag) => {
+        diagram.openSearch(tag);
+      }),
+      onTagMouseEnter: useCallbackRef((tag) => {
+        diagram.send({ type: "tag.highlight", tag });
+      }),
+      onTagMouseLeave: useCallbackRef((_tag) => {
+        diagram.send({ type: "tag.unhighlight" });
+      }),
+      ...props
+    }
+  );
+}
 function ElementDetailsButtonWithHandler(props) {
   const diagram = useDiagram();
   const fqn = props.data.modelFqn;
@@ -51,7 +71,7 @@ function CompoundDetailsButtonWithHandler(props) {
   );
 }
 function ElementNode(props) {
-  const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
+  const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest, enableNotes } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
     enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
@@ -60,11 +80,12 @@ function ElementNode(props) {
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
     enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     !enableReadOnly && /* @__PURE__ */ jsx(ElementToolbar, { ...props }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
+    enableNotes && /* @__PURE__ */ jsx(NodeNotes, { ...props }),
+    /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
   ] });
 }
 function DeploymentNode(props) {
-  const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest } = useEnabledFeatures();
+  const { enableElementTags, enableElementDetails, enableReadOnly, enableCompareWithLatest, enableNotes } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
     enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
@@ -73,7 +94,8 @@ function DeploymentNode(props) {
     /* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
     enableElementDetails && /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     !enableReadOnly && /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }),
-    /* @__PURE__ */ jsx(DefaultHandles, {})
+    enableNotes && /* @__PURE__ */ jsx(NodeNotes, { ...props }),
+    /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
   ] });
 }
 const compoundHasDrifts = css({
@@ -99,7 +121,7 @@ function CompoundElementNode(props) {
         /* @__PURE__ */ jsx(CompoundActions, { ...props }),
         enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
         !enableReadOnly && /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }),
-        /* @__PURE__ */ jsx(DefaultHandles, {})
+        /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
       ]
     }
   );
@@ -118,7 +140,7 @@ function CompoundDeploymentNode(props) {
         /* @__PURE__ */ jsx(CompoundActions, { ...props }),
         enableElementDetails && /* @__PURE__ */ jsx(CompoundDetailsButtonWithHandler, { ...props }),
         !enableReadOnly && /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }),
-        /* @__PURE__ */ jsx(DefaultHandles, {})
+        /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
       ]
     }
   );
@@ -134,7 +156,7 @@ function ViewGroupNode(props) {
       children: [
         enableCompareWithLatest && /* @__PURE__ */ jsx(NodeDrifts, { nodeProps: props }),
         /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-        /* @__PURE__ */ jsx(DefaultHandles, {})
+        /* @__PURE__ */ jsx(DefaultHandles, { direction: props.data.viewLayoutDir })
       ]
     }
   );

package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Popover, PopoverTarget, Button, ColorSwatch, PopoverDropdown, Space, Divider, Stack, TooltipGroup, Flex, Tooltip, CheckIcon, rem, Slider } from '@mantine/core';
+import { Flex } from '@likec4/styles/jsx';
+import { Popover, PopoverTarget, Button, ColorSwatch, PopoverDropdown, Space, Divider, Stack, TooltipGroup, Tooltip, CheckIcon, rem, Slider } from '@mantine/core';
 import { useUpdateEffect } from '@react-hookz/web';
 import { useState } from 'react';
 import { keys } from 'remeda';
@@ -78,7 +79,7 @@ function ColorSwatches({
   };
   const otherColors = keys(theme.colors).filter((color) => !SemanticColors.includes(color));
   return /* @__PURE__ */ jsx(Stack, { gap: 2, onMouseLeave: () => onColorPreview(null), children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 1e3, closeDelay: 300, children: [
-    /* @__PURE__ */ jsx(Flex, { maw: 120, gap: "6", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: SemanticColors.map((color) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Flex, { maxW: "120px", gap: "1.5", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: SemanticColors.map((color) => /* @__PURE__ */ jsx(
       Tooltip,
       {
         label: color,
@@ -106,8 +107,8 @@ function ColorSwatches({
       Flex,
       {
         mt: "sm",
-        maw: 110,
-        gap: "6",
+        maxW: "110px",
+        gap: "1.5",
         justify: "flex-start",
         align: "flex-start",
         direction: "row",

package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.d.ts

@@ -1,3 +1,8 @@
+import { Fqn } from '@likec4/core/types';
 import { Types } from '../../../types';
-export declare function ElementToolbar(props: Types.NodeProps<'element'>): import("react/jsx-runtime").JSX.Element;
+export declare function ElementToolbar(props: Types.NodeProps<'element' | 'seq-actor'> & {
+    data: {
+        modelFqn: Fqn;
+    };
+}): import("react/jsx-runtime").JSX.Element;
 export declare function DeploymentElementToolbar(props: Types.NodeProps<'deployment'>): import("react/jsx-runtime").JSX.Element;

package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.js

@@ -7,11 +7,13 @@ import { BorderStyleOption, GoToSourceButton, BrowseRelationshipsButton } from '
 import { ColorButton } from './ColorButton.js';
 import { Toolbar } from './Toolbar.js';
 import { useHandlers } from './useHandlers.js';
-import IconSelector from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconCheck from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
+import IconSelector from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconCheck from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
 
+const SortedElementShapes = [...ElementShapes].sort();
 function ElementToolbar(props) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();
+  const { enableVscode, enableRelationshipBrowser, enableNotes } = useEnabledFeatures();
+  const increaseOffset = !!(enableNotes && props.data.notes);
   const {
     data: {
       shape,
@@ -25,6 +27,7 @@ function ElementToolbar(props) {
     {
       nodeProps: props,
       title: modelFqn,
+      offset: increaseOffset ? 20 : 10,
       align: "start",
       children: [
         /* @__PURE__ */ jsx(
@@ -119,7 +122,7 @@ function ElementShapeButton({
       offset: 2,
       styles: {
         item: {
-          padding: "calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-xs)"
+          padding: "calc(var(--spacing-xs) / 1.5) var(--spacing-xs)"
         }
       },
       withinPortal: false,
@@ -129,8 +132,11 @@ function ElementShapeButton({
           {
             variant: "light",
             color: "gray",
-            size: "xs",
-            px: 8,
+            size: "compact-sm",
+            fz: "xxs",
+            px: 4,
+            pl: 8,
+            py: 2,
             rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 12 }),
             children: elementShape
           }
@@ -140,11 +146,10 @@ function ElementShapeButton({
           {
             onDoubleClick: stopPropagation,
             onClick: stopPropagation,
-            children: ElementShapes.map((shape) => /* @__PURE__ */ jsx(
+            children: SortedElementShapes.map((shape) => /* @__PURE__ */ jsx(
               MenuItem,
               {
-                fz: 12,
-                fw: 500,
+                fz: "sm",
                 value: shape,
                 rightSection: elementShape === shape ? /* @__PURE__ */ jsx(IconCheck, { size: 12 }) : void 0,
                 onClick: (e) => {

package/dist/likec4diagram/custom/nodes/toolbar/_shared.js

@@ -1,12 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
-import { SegmentedControl, Tooltip as Tooltip$1, ActionIcon } from '@mantine/core';
+import { SegmentedControl, ActionIcon, Tooltip as Tooltip$1 } from '@mantine/core';
 import { useState, useEffect } from 'react';
 import '@xstate/react';
 import 'fast-equals';
 import { useDiagram } from '../../../../hooks/safeContext.js';
 import { useDiagramEventHandlers } from '../../../../context/DiagramEventHandlers.js';
-import IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-import IconTransform from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconTransform from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",
@@ -80,7 +80,7 @@ function BorderStyleOption({
     SegmentedControl,
     {
       size: "xs",
-      fz: 9,
+      fz: "xxs",
       fullWidth: true,
       withItemsBorders: false,
       value,

package/dist/likec4diagram/custom/nodes/toolbar/styles.css.js

@@ -1,9 +1,9 @@
 import { css } from '@likec4/styles/css';
 
 const toolbarTitle = css({
-  color: "mantine.colors.dimmed",
-  fontSize: "10px",
-  fontWeight: 600,
+  color: "text.dimmed",
+  fontSize: "xxs",
+  fontWeight: "bold",
   maxWidth: "220px",
   cursor: "default",
   userSelect: "all",