@likec4/diagram 1.35.0 → 1.36.0

package/dist/LikeC4Diagram.js

@@ -3,8 +3,8 @@ import { ReactFlowProvider } from '@xyflow/react';
 import { useRef } from 'react';
 import { ControlsCustomLayoutProvider } from './context/ControlsCustomLayout.js';
 import { ReduceGraphicsContext } from './context/ReduceGraphics.js';
-import { LikeC4CustomColors } from './LikeC4CustomColors.js';
 import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow.js';
+import { LikeC4Styles } from './LikeC4Styles.js';
 import { DiagramActorProvider } from './state/DiagramActorProvider.js';
 import { EnsureMantine } from './context/EnsureMantine.js';
 import { FramerMotionConfig } from './context/FramerMotionConfig.js';
@@ -108,9 +108,9 @@ function LikeC4Diagram({
                 onOpenSource,
                 onBurgerMenuClick
               },
-              children: /* @__PURE__ */ jsx(ReduceGraphicsContext, { reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsxs(RootContainer, { className, reduceGraphics: isReducedGraphicsMode, children: [
-                /* @__PURE__ */ jsx(LikeC4CustomColors, {}),
-                /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsxs(ReduceGraphicsContext, { reduceGraphics: isReducedGraphicsMode, children: [
+                /* @__PURE__ */ jsx(LikeC4Styles, {}),
+                /* @__PURE__ */ jsx(RootContainer, { className, reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsx(
                   ReactFlowProvider,
                   {
                     fitView,
@@ -138,8 +138,8 @@ function LikeC4Diagram({
                       }
                     )
                   }
-                )
-              ] }) })
+                ) })
+              ] })
             }
           )
         }

package/dist/LikeC4Diagram.props.d.ts

@@ -1,10 +1,9 @@
-import { Any, DiagramEdge, DiagramNode, LayoutedView, ViewChange, WhereOperator } from '@likec4/core/types';
+import { Any, aux, DiagramEdge, DiagramNode, LayoutedView, ViewChange, WhereOperator } from '@likec4/core/types';
 import { ReactFlowProps as XYFlowProps } from '@xyflow/react';
 import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import { SetRequired } from 'type-fest';
 import { ControlsCustomLayout } from './context/ControlsCustomLayout';
 import { CustomNodes } from './custom/customNodes';
-import type * as aux from '@likec4/core/types/_aux';
 export type { CustomNodes, WhereOperator };
 export type DiagramNodeWithNavigate<A extends Any> = SetRequired<DiagramNode<A>, 'navigateTo'>;
 type ElementIconRendererProps = {
@@ -233,7 +232,7 @@ export type OpenSourceParams<A extends aux.Any = aux.Any> = {
 } | {
     view: aux.StrictViewId<A>;
 };
-export interface LikeC4DiagramEventHandlers<A extends aux.Any> {
+export interface LikeC4DiagramEventHandlers<A extends aux.Any = aux.Any> {
     onChange?: OnChange | null | undefined;
     onNavigateTo?: OnNavigateTo<A> | null | undefined;
     onNodeClick?: OnNodeClick<A> | null | undefined;

package/dist/LikeC4ModelProvider.d.ts

@@ -1,10 +1,10 @@
 import { LikeC4Model } from '@likec4/core/model';
 import { aux } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-export type LikeC4ModelProviderProps<A extends aux.Any = aux.Unknown> = PropsWithChildren<{
+export interface LikeC4ModelProviderProps<A extends aux.Any = aux.Unknown> {
     likec4model: LikeC4Model<A>;
-}>;
+}
 /**
  * Ensures LikeC4Model context
  */
-export declare function LikeC4ModelProvider<A extends aux.Any = aux.Unknown>({ children, likec4model, }: LikeC4ModelProviderProps<A>): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4ModelProvider<A extends aux.Any = aux.Unknown>({ children, likec4model, }: PropsWithChildren<LikeC4ModelProviderProps<A>>): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4ProjectsProvider.d.ts

@@ -0,0 +1,17 @@
+import { LikeC4Project, ProjectId } from '@likec4/core/types';
+import { PropsWithChildren } from 'react';
+export interface LikeC4ProjectsProviderProps {
+    /**
+     * Projects to be used in the navigation panel.
+     * Current project is taken from the LikeC4Model
+     */
+    projects: ReadonlyArray<LikeC4Project>;
+    /**
+     * Optional callback when another project is selected.
+     */
+    onProjectChange?: (id: ProjectId) => void;
+}
+/**
+ * Ensures LikeC4Projects context
+ */
+export declare function LikeC4ProjectsProvider({ children, projects, onProjectChange: _onProjectChange, }: PropsWithChildren<LikeC4ProjectsProviderProps>): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4ProjectsProvider.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { useCallbackRef } from '@mantine/hooks';
+import { useCustomCompareMemo } from '@react-hookz/web';
+import { shallowEqual } from 'fast-equals';
+import { useContext } from 'react';
+import { LikeC4ProjectsContext } from './likec4model/LikeC4ProjectsContext.js';
+
+function LikeC4ProjectsProvider({
+  children,
+  projects,
+  onProjectChange: _onProjectChange
+}) {
+  const outerScope = useContext(LikeC4ProjectsContext);
+  if (outerScope) {
+    console.warn("LikeC4ProjectsProvider should not be nested inside another one");
+  }
+  const onProjectChange = useCallbackRef(_onProjectChange);
+  const value = useCustomCompareMemo(() => ({ projects, onProjectChange }), [projects, onProjectChange], shallowEqual);
+  return /* @__PURE__ */ jsx(LikeC4ProjectsContext.Provider, { value, children });
+}
+
+export { LikeC4ProjectsProvider };

package/dist/LikeC4Styles.d.ts

@@ -0,0 +1 @@
+export declare function LikeC4Styles(): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4Styles.js

@@ -0,0 +1,94 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { ThemeColors, defaultTheme } from '@likec4/core';
+import { useMantineStyleNonce } from '@mantine/core';
+import { toRgba, mix, toHex, scale } from 'khroma';
+import { pipe, entries, map, join, range } from 'remeda';
+import globalsCss from './globals.css.js';
+import { useLikeC4Specification } from './likec4model/useLikeC4Model.js';
+
+const scheme = (scheme2) => `[data-mantine-color-scheme="${scheme2}"]`;
+const whenDark = scheme("dark");
+const whenLight = scheme("light");
+const MAX_DEPTH = 5;
+const generateCompoundColors = (name, colors, depth) => {
+  const compoundDarkColor = (color) => toHex(
+    scale(color, {
+      l: -22 - 5 * depth,
+      s: -10 - 6 * depth
+    })
+  );
+  const compoundLightColor = (color) => toHex(
+    scale(color, {
+      l: -20 - 3 * depth,
+      s: -3 - 6 * depth
+    })
+  );
+  const selector = `:where([data-likec4-color="${name}"][data-compound-depth="${depth}"])`;
+  return `
+${selector} {
+  --likec4-palette-fill: ${compoundLightColor(colors.elements.fill)};
+  --likec4-palette-stroke: ${compoundLightColor(colors.elements.stroke)};
+}
+${whenDark} ${selector} {
+  --likec4-palette-fill: ${compoundDarkColor(colors.elements.fill)};
+  --likec4-palette-stroke: ${compoundDarkColor(colors.elements.stroke)};
+}
+  `.trim();
+};
+function toStyle(name, colors) {
+  const selector = `:where([data-likec4-color=${name}])`;
+  return [
+    `
+${selector} {
+  --likec4-palette-fill: ${colors.elements.fill};
+  --likec4-palette-stroke: ${colors.elements.stroke};
+  --likec4-palette-hiContrast: ${colors.elements.hiContrast};
+  --likec4-palette-loContrast: ${colors.elements.loContrast};
+  --likec4-palette-relation-stroke: ${colors.relationships.lineColor};
+  --likec4-palette-relation-label: ${colors.relationships.labelColor};
+  --likec4-palette-relation-label-bg: ${colors.relationships.labelBgColor};
+}
+${whenLight} ${selector} {
+  --likec4-palette-relation-stroke-selected: ${toRgba(mix(colors.relationships.lineColor, "black", 85))};
+}
+${whenDark} ${selector} {
+  --likec4-palette-relation-stroke-selected: ${toRgba(mix(colors.relationships.lineColor, "white", 70))};
+}
+
+  `.trim(),
+    ...range(1, MAX_DEPTH + 1).map((depth) => generateCompoundColors(name, colors, depth))
+  ].join("\n");
+}
+const builtInColors = ThemeColors.map(
+  (color) => toStyle(color, {
+    elements: defaultTheme.elements[color],
+    relationships: defaultTheme.relationships[color]
+  })
+).join("\n");
+function generateCustomColorStyles(customColors) {
+  return pipe(
+    entries(customColors),
+    map(([name, color]) => toStyle(name, color)),
+    join("\n")
+  );
+}
+function LikeC4Styles() {
+  const nonce = useMantineStyleNonce()?.();
+  const customColors = useLikeC4Specification().customColors;
+  const customColorsStyles = customColors ? generateCustomColorStyles(customColors) : "";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { type: "text/css", "data-likec4-global": true, dangerouslySetInnerHTML: { __html: globalsCss }, nonce }),
+    /* @__PURE__ */ jsx("style", { type: "text/css", "data-likec4-colors": true, dangerouslySetInnerHTML: { __html: builtInColors }, nonce }),
+    customColorsStyles && /* @__PURE__ */ jsx(
+      "style",
+      {
+        type: "text/css",
+        "data-likec4-custom-colors": true,
+        dangerouslySetInnerHTML: { __html: customColorsStyles },
+        nonce
+      }
+    )
+  ] });
+}
+
+export { LikeC4Styles };

package/dist/StaticLikeC4Diagram.d.ts

@@ -1,4 +1,4 @@
+import { Any, UnknownLayouted } from '@likec4/core/types';
 import { LikeC4DiagramProperties } from './LikeC4Diagram.props';
-import type * as aux from '@likec4/core/types/_aux';
-export type StaticLikeC4DiagramProps<A extends aux.Any> = Pick<LikeC4DiagramProperties<A>, 'view' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'enableElementDetails' | 'enableRelationshipDetails' | 'enableRelationshipBrowser' | 'enableElementTags' | 'reduceGraphics' | 'initialWidth' | 'initialHeight' | 'renderIcon' | 'renderNodes' | 'where'>;
-export declare function StaticLikeC4Diagram<A extends aux.Any = aux.UnknownLayouted>({ view, fitView, fitViewPadding, enableRelationshipDetails, enableRelationshipBrowser, background, ...rest }: StaticLikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;
+export type StaticLikeC4DiagramProps<A extends Any> = Pick<LikeC4DiagramProperties<A>, 'view' | 'className' | 'fitView' | 'fitViewPadding' | 'background' | 'enableElementDetails' | 'enableRelationshipDetails' | 'enableRelationshipBrowser' | 'enableElementTags' | 'reduceGraphics' | 'initialWidth' | 'initialHeight' | 'renderIcon' | 'renderNodes' | 'where'>;
+export declare function StaticLikeC4Diagram<A extends Any = UnknownLayouted>({ view, fitView, fitViewPadding, enableRelationshipDetails, enableRelationshipBrowser, background, ...rest }: StaticLikeC4DiagramProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/base/BaseXYFlow.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { cx, css } from '@likec4/styles/css';
+import { cx, cva } from '@likec4/styles/css';
 import { useCallbackRef } from '@mantine/hooks';
 import { ReactFlow, useStore } from '@xyflow/react';
 import { Fragment } from 'react';
@@ -10,30 +10,26 @@ import { Background } from './Background.js';
 import { MinZoom, MaxZoom } from './const.js';
 import { setHovered } from './types.Base.js';
 
-const cssTransparentBg = css({
-  background: "transparent !important",
-  ["--xy-background-color"]: "transparent !important"
-});
-const cssReactFlow = css({
-  // '@supports': {
-  //   // https://wojtek.im/journal/targeting-safari-with-css-media-query
-  //   '(hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none)': {
-  //     // TODO: this workaround disables animations in Safari (to improve performance)
-  //     vars: {
-  //       [vars.safariAnimationHook]: '',
-  //     },
-  //   },
-  // },
-  ["--xy-background-color"]: "{colors.mantine.colors.body}",
-  ["--xy-background-pattern-color"]: {
-    _dark: "{colors.mantine.colors.dark[5]}",
-    _light: "{colors.mantine.colors.gray[4]}"
-  },
-  "& .react-flow__pane": {
-    WebkitUserSelect: "none"
+const cssReactFlow = cva({
+  base: {
+    "& .react-flow__pane": {
+      WebkitUserSelect: "none"
+    },
+    "& .react-flow__attribution": {
+      display: "none"
+    }
   },
-  "& .react-flow__attribution": {
-    display: "none"
+  variants: {
+    transparent: {
+      true: {
+        background: "transparent !important",
+        ["--xy-background-color"]: "transparent !important"
+      },
+      false: {
+        ["--xy-background-color"]: "{colors.likec4.background}",
+        ["--xy-background-pattern-color"]: "{colors.likec4.background.pattern}"
+      }
+    }
   }
 });
 const BaseXYFlow = ({
@@ -66,8 +62,9 @@ const BaseXYFlow = ({
       nodes,
       edges,
       className: cx(
-        cssReactFlow,
-        background === "transparent" && cssTransparentBg,
+        cssReactFlow({
+          transparent: background === "transparent"
+        }),
         className
       ),
       ...isZoomTooSmall && {

package/dist/base/primitives/MarkdownBlock.d.ts

@@ -1,5 +1,6 @@
 import { RichTextOrEmpty as RichTextType } from '@likec4/core/types';
 import { BoxProps } from '@likec4/styles/jsx';
+import { JsxStyleProps } from '@likec4/styles/types';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export type MarkdownBlockProps = Omit<BoxProps, 'dangerouslySetInnerHTML' | 'children'> & {
     value: RichTextType;
@@ -9,10 +10,15 @@ export type MarkdownBlockProps = Omit<BoxProps, 'dangerouslySetInnerHTML' | 'chi
      */
     uselikec4palette?: boolean;
     /**
-     * Scale factor for the font size.
+     * Scale factor for the block
      * @default 1
      */
     textScale?: number;
+    /**
+     * Font size for the block
+     * @default 'md'
+     */
+    fontSize?: JsxStyleProps['fontSize'];
     /**
      * If true, the component will not render anything if the value is empty.
      * @default false

package/dist/base/primitives/MarkdownBlock.js

@@ -17,7 +17,7 @@ const MarkdownBlock = forwardRef(({
   if (value.isEmpty && hideIfEmpty) {
     return null;
   }
-  const content = value.nonEmpty ? { dangerouslySetInnerHTML: { __html: value.html } } : { children: /* @__PURE__ */ jsx(Text, { component: "span", fz: "xs", c: "dimmed", children: emptyText }) };
+  const content = value.nonEmpty ? { dangerouslySetInnerHTML: { __html: value.html } } : { children: /* @__PURE__ */ jsx(Text, { component: "span", fz: "xs", c: "dimmed", style: { userSelect: "none" }, children: emptyText }) };
   return /* @__PURE__ */ jsx(
     Box,
     {

package/dist/base/primitives/compound/CompoundActionButton.js

@@ -24,8 +24,8 @@ function CompoundActionButton({
       className: cx(
         css({
           position: "absolute",
-          top: "5px",
-          left: "4px",
+          top: "[5px]",
+          left: "[4px]",
           _smallZoom: {
             display: "none"
           }

package/dist/base/primitives/compound/CompoundDetailsButton.js

@@ -24,8 +24,8 @@ function CompoundDetailsButton({
       className: cx(
         css({
           position: "absolute",
-          top: "[2px]",
-          right: "[2px]",
+          top: "0.5",
+          right: "0.5",
           _smallZoom: {
             display: "none"
           }

package/dist/base/primitives/compound/CompoundNodeContainer.css.js

@@ -33,7 +33,7 @@ const root = css.raw({
     width: "100%",
     height: "100%",
     border: "transparent",
-    background: "likec4.palette.fill",
+    background: "var(--likec4-palette-fill)",
     backgroundClip: "padding-box",
     transitionDelay: ".075ms"
   },
@@ -70,7 +70,7 @@ const compoundBorder = css.raw({
   background: "transparent",
   borderStyle: "dashed",
   borderWidth: `[${borderWidth.ref}]`,
-  borderColor: `[color-mix(in srgb, {colors.likec4.palette.stroke} ${borderOpacityPercent.ref}, transparent)]`
+  borderColor: `[color-mix(in srgb, var(--likec4-palette-stroke) ${borderOpacityPercent.ref}, transparent)]`
 });
 const indicatorSvg = css.raw({
   position: "absolute",
@@ -92,12 +92,12 @@ const indicatorSvg = css.raw({
   }
 });
 const indicatorRect = css.raw({
-  stroke: `[color-mix(in srgb, {colors.likec4.palette.stroke} 60%, {colors.likec4.palette.hiContrast})]`,
+  stroke: `[color-mix(in srgb, var(--likec4-palette-stroke) 60%, var(--likec4-palette-hiContrast))]`,
   strokeWidth: "4",
   fill: "[none]",
   animationStyle: "indicator",
   _light: {
-    stroke: `[color-mix(in srgb, {colors.likec4.palette.stroke} 80%, {colors.likec4.palette.hiContrast})]`
+    stroke: `[color-mix(in srgb, var(--likec4-palette-stroke) 80%, var(--likec4-palette-hiContrast))]`
   }
 });
 const compound = sva({

package/dist/base/primitives/compound/CompoundNodeContainer.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { cx, css } from '@likec4/styles/css';
+import { cx } from '@likec4/styles/css';
 import { m } from 'motion/react';
 import { isNumber, clamp } from 'remeda';
 import { compound, borderOpacityPercent, borderRadius, borderWidth, compoundOpacity } from './CompoundNodeContainer.css.js';
@@ -44,9 +44,6 @@ function CompoundNodeContainer({
     m.div,
     {
       className: cx(
-        css({
-          likec4Palette: `${data.color}.${depth}`
-        }),
         classes.root,
         "likec4-compound-node",
         className

package/dist/base/primitives/compound/CompoundTitle.js

@@ -8,10 +8,11 @@ const titleContainer = css({
   position: "absolute",
   display: "flex",
   alignItems: "center",
-  gap: "6px",
-  left: "14px",
-  top: "4px",
-  right: "30px",
+  gap: "1.5",
+  // 6px
+  left: "[14px]",
+  top: "[4px]",
+  right: "[30px]",
   width: "auto",
   minHeight: "30px",
   [`:where(.react-flow__node.draggable) &`]: {
@@ -19,7 +20,7 @@ const titleContainer = css({
     cursor: "grab"
   },
   [`.likec4-compound-node:has(.compound-action) &`]: {
-    paddingLeft: "22px"
+    paddingLeft: "[22px]"
   }
 });
 const titleText = css({
@@ -29,11 +30,11 @@ const titleText = css({
   fontSize: "15px",
   textTransform: "uppercase",
   letterSpacing: "0.2px",
-  color: "likec4.palette.loContrast",
+  color: "var(--likec4-palette-loContrast)",
   "[data-compound-title-inverse] &": {
     color: {
-      base: "[color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})]",
-      _light: "likec4.palette.stroke"
+      base: "[color-mix(in srgb, var(--likec4-palette-loContrast) 60%, var(--likec4-palette-fill))]",
+      _light: "var(--likec4-palette-stroke)"
     }
   }
 });

package/dist/base/primitives/compound/actionbtns.css.js

@@ -5,14 +5,14 @@ const compoundActionBtn = cva({
     transitionDuration: "normal",
     "[data-compound-title-inverse] &": {
       _dark: {
-        "--actionbtn-color": "color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})"
+        "--actionbtn-color": "color-mix(in srgb, var(--likec4-palette-loContrast) 60%, var(--likec4-palette-fill))"
       },
       _light: {
-        "--actionbtn-color": "{colors.likec4.palette.stroke}",
-        "--actionbtn-color-hovered": "{colors.likec4.palette.stroke}",
-        "--actionbtn-color-hovered-btn": "{colors.likec4.palette.hiContrast}",
-        "--actionbtn-bg-hovered": `{colors.likec4.palette.fill/50}`,
-        "--actionbtn-bg-hovered-btn": `{colors.likec4.palette.fill}`
+        "--actionbtn-color": "var(--likec4-palette-stroke)",
+        "--actionbtn-color-hovered": "var(--likec4-palette-stroke)",
+        "--actionbtn-color-hovered-btn": "var(--likec4-palette-hiContrast)",
+        "--actionbtn-bg-hovered": `var(--likec4-palette-fill)/50`,
+        "--actionbtn-bg-hovered-btn": `var(--likec4-palette-fill)`
       }
     }
   },

package/dist/base/primitives/edge/EdgeActionButton.js

@@ -1,15 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
+import { edgeActionBtn } from '@likec4/styles/recipes';
 import { ActionIcon } from '@mantine/core';
 import { stopPropagation } from '../../../utils/xyflow.js';
-import { actionBtn } from './edge.css.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';
 
 function EdgeActionButton({ icon, onClick }) {
   return /* @__PURE__ */ jsx(
     ActionIcon,
     {
-      className: cx("nodrag nopan", actionBtn),
+      className: cx("nodrag nopan", edgeActionBtn()),
       onPointerDownCapture: stopPropagation,
       onClick,
       role: "button",

package/dist/base/primitives/edge/EdgeContainer.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { invariant } from '@likec4/core';
-import { cx, css } from '@likec4/styles/css';
-import { edgeVars, edgeContainer } from './edge.css.js';
+import { cx } from '@likec4/styles/css';
+import { edgeContainer } from './edge.css.js';
 
 function EdgeContainer({
   className,
@@ -18,12 +18,9 @@ function EdgeContainer({
 }) {
   const props = {
     className: cx(
-      css({
-        likec4RelationPalette: color
-      }),
-      edgeVars,
+      className,
       edgeContainer,
-      className
+      "likec4-edge-container"
     ),
     "data-likec4-color": color,
     "data-edge-dir": data.dir ?? "forward",

package/dist/base/primitives/edge/EdgeLabel.css.d.ts

@@ -1,4 +1,3 @@
-import { SlotRecipeRuntimeFn } from '@likec4/styles/types';
 export declare const edgeNoteCloseButton: string;
 export declare const edgeNoteText: string;
 export declare const translate: {
@@ -6,24 +5,3 @@ export declare const translate: {
     readonly ref: "var(--edge-translate)";
 };
 export declare const edgeLabelContainer: string;
-export declare const labelsva: SlotRecipeRuntimeFn<"root" | "stepNumber" | "labelContents" | "labelText" | "labelTechnology", {
-    isStepEdge: {
-        false: {};
-        true: {
-            root: {
-                flexDirection: "row";
-                gap: "4px";
-                padding: "0px";
-            };
-            labelContents: {
-                display: "flex";
-                flexDirection: "column";
-                alignItems: "center";
-                padding: "2px 5px 4px 0px";
-            };
-            labelText: {
-                padding: "2px 6px 4px 0px";
-            };
-        };
-    };
-}>;

package/dist/base/primitives/edge/EdgeLabel.css.js

@@ -1,10 +1,10 @@
-import { css, sva } from '@likec4/styles/css';
+import { css } from '@likec4/styles/css';
 
 const labelBorderRadius = "4px";
 css({
   position: "absolute",
-  top: 4,
-  right: 4
+  top: "1",
+  right: "1"
 });
 css({
   userSelect: "all",
@@ -22,8 +22,8 @@ const translate = {
   ref: `var(--edge-translate)`
 };
 const edgeLabelContainer = css({
-  top: 0,
-  left: 0,
+  top: "0",
+  left: "0",
   position: "absolute",
   pointerEvents: "all",
   cursor: "pointer",
@@ -53,83 +53,5 @@ const edgeLabelContainer = css({
     display: "none"
   }
 });
-const labelsva = sva({
-  slots: ["root", "stepNumber", "labelContents", "labelText", "labelTechnology"],
-  base: {
-    root: {
-      pointerEvents: "all",
-      fontFamily: "likec4.relation",
-      padding: "3px 5px 5px 5px",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      width: "max-content",
-      maxWidth: "100%",
-      gap: "4px"
-    },
-    stepNumber: {
-      alignSelf: "stretch",
-      flex: "0 0 auto",
-      fontWeight: 600,
-      fontSize: "14px",
-      lineHeight: "1",
-      padding: "5px 5px",
-      textAlign: "center",
-      minWidth: "22px",
-      borderTopLeftRadius: labelBorderRadius,
-      borderBottomLeftRadius: labelBorderRadius,
-      background: `[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 10%)]`,
-      fontVariantNumeric: "tabular-nums",
-      // _dark: {
-      [':where([data-likec4-color="gray"]) &']: {
-        _dark: {
-          background: `[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 15%)]`
-        }
-      }
-    },
-    labelContents: {
-      display: "contents",
-      _empty: {
-        display: "none !important"
-      }
-    },
-    labelText: {
-      whiteSpaceCollapse: "preserve-breaks",
-      fontSize: "14px",
-      lineHeight: "1.185"
-    },
-    labelTechnology: {
-      textAlign: "center",
-      whiteSpaceCollapse: "preserve-breaks",
-      fontSize: "11px",
-      lineHeight: "1",
-      opacity: 0.75
-    }
-  },
-  variants: {
-    isStepEdge: {
-      false: {},
-      true: {
-        root: {
-          flexDirection: "row",
-          gap: "4px",
-          padding: "0px"
-        },
-        labelContents: {
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          padding: "2px 5px 4px 0px"
-        },
-        labelText: {
-          padding: "2px 6px 4px 0px"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    isStepEdge: false
-  }
-});
 
-export { edgeLabelContainer, labelsva, translate };
+export { edgeLabelContainer, translate };