@likec4/diagram 1.34.2 → 1.36.0

package/src/LikeC4Diagram.props.ts

@@ -1,12 +1,12 @@
 import type {
   Any,
+  aux,
   DiagramEdge,
   DiagramNode,
   LayoutedView,
   ViewChange,
   WhereOperator,
 } from '@likec4/core/types'
-import type * as aux from '@likec4/core/types/_aux'
 import type { ReactFlowProps as XYFlowProps } from '@xyflow/react'
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
 import type { SetRequired } from 'type-fest'
@@ -86,6 +86,26 @@ export type OverrideReactFlowProps = Pick<
 export type PaddingUnit = 'px' | '%'
 export type PaddingWithUnit = `${number}${PaddingUnit}` | number
 
+/**
+ * Padding around the diagram
+ *
+ * @example
+ * {
+ *   top: '8px',
+ *   right: '8px',
+ *   bottom: '8px',
+ *   left: '8px',
+ * }
+ */
+export type ViewPadding = PaddingWithUnit | {
+  top?: PaddingWithUnit
+  right?: PaddingWithUnit
+  bottom?: PaddingWithUnit
+  left?: PaddingWithUnit
+  x?: PaddingWithUnit
+  y?: PaddingWithUnit
+}
+
 export interface LikeC4DiagramProperties<A extends aux.Any> {
   view: LayoutedView<A>
 
@@ -108,10 +128,11 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
   readonly?: boolean | undefined
   /**
    * Show/hide panel with top left controls,
+   * - `next` - Experimental navigation panel
    *
    * @default true if not readonly
    */
-  controls?: boolean | undefined
+  controls?: boolean | 'next' | undefined
   /**
    * If set, initial viewport will show all nodes & edges
    * @default true
@@ -121,8 +142,29 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
   /**
    * Padding around the diagram
    * @default '8px'
+   *
+   * @see {@link ViewPadding}
+   *
+   * @example
+   * ```tsx
+   * <LikeC4Diagram
+   *   fitViewPadding={{
+   *     x: '16px',
+   *     y: '16px',
+   *   }}
+   * />
+   *
+   * <LikeC4Diagram
+   *   fitViewPadding={{
+   *     top: '8px',
+   *     right: '8px',
+   *     bottom: '8px',
+   *     left: '8px',
+   *   }}
+   * />
+   * ```
    */
-  fitViewPadding?: PaddingWithUnit | undefined
+  fitViewPadding?: ViewPadding | undefined
 
   /**
    * @default false if readonly
@@ -223,8 +265,9 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
   /**
    * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
    * Enable it if you have a large or static view
+   * - `auto` - will be `true` if view has more then 3000 * 2000 pixels
    *
-   * @default 'auto' - will be `true` if view has more then 3000 * 2000 pixels
+   * @default 'auto'
    */
   reduceGraphics?: 'auto' | boolean | undefined
 
@@ -236,6 +279,11 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
 
   /**
    * Customize layout of the controls on the top left
+   *
+   * @note
+   * Ignored if `controls="next"`
+   *
+   * @see {@link controls}
    */
   renderControls?: ControlsCustomLayout | undefined
 
@@ -271,7 +319,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/src/LikeC4Diagram.tsx

@@ -11,10 +11,10 @@ import {
 } from './context'
 import { ControlsCustomLayoutProvider } from './context/ControlsCustomLayout'
 import { ReduceGraphicsContext } from './context/ReduceGraphics'
-import { LikeC4CustomColors } from './LikeC4CustomColors'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow'
 import type { Types } from './likec4diagram/types'
+import { LikeC4Styles } from './LikeC4Styles'
 import { DiagramActorProvider } from './state/DiagramActorProvider'
 
 export type LikeC4DiagramProps<A extends Any = Any> = PropsWithChildren<
@@ -129,8 +129,8 @@ export function LikeC4Diagram<A extends Any = Any>({
                 onBurgerMenuClick,
               }}>
               <ReduceGraphicsContext reduceGraphics={isReducedGraphicsMode}>
+                <LikeC4Styles />
                 <RootContainer className={className} reduceGraphics={isReducedGraphicsMode}>
-                  <LikeC4CustomColors />
                   <XYFlowProvider
                     fitView={fitView}
                     {...initialRef.current}

package/src/LikeC4ModelProvider.tsx

@@ -1,19 +1,19 @@
-import type { LikeC4Model } from '@likec4/core/model'
-import type { Any, Unknown } from '@likec4/core/types'
+import { LikeC4Model } from '@likec4/core/model'
+import type { aux } from '@likec4/core/types'
 import { type PropsWithChildren } from 'react'
 import { LikeC4ModelContext } from './likec4model/LikeC4ModelContext'
 
-export type LikeC4ModelProviderProps<A extends Any> = PropsWithChildren<{
+export interface LikeC4ModelProviderProps<A extends aux.Any = aux.Unknown> {
   likec4model: LikeC4Model<A>
-}>
+}
 
 /**
  * Ensures LikeC4Model context
  */
-export function LikeC4ModelProvider<A extends Any = Unknown>({
+export function LikeC4ModelProvider<A extends aux.Any = aux.Unknown>({
   children,
   likec4model,
-}: LikeC4ModelProviderProps<A>) {
+}: PropsWithChildren<LikeC4ModelProviderProps<A>>) {
   return (
     <LikeC4ModelContext.Provider value={likec4model}>
       {children}

package/src/LikeC4ProjectsProvider.tsx

@@ -0,0 +1,41 @@
+import type { LikeC4Project, ProjectId } from '@likec4/core/types'
+import { useCallbackRef } from '@mantine/hooks'
+import { useCustomCompareMemo } from '@react-hookz/web'
+import { shallowEqual } from 'fast-equals'
+import { type PropsWithChildren, useContext } from 'react'
+import { LikeC4ProjectsContext } from './likec4model/LikeC4ProjectsContext'
+
+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 function LikeC4ProjectsProvider({
+  children,
+  projects,
+  onProjectChange: _onProjectChange,
+}: PropsWithChildren<LikeC4ProjectsProviderProps>) {
+  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 (
+    <LikeC4ProjectsContext.Provider value={value}>
+      {children}
+    </LikeC4ProjectsContext.Provider>
+  )
+}

package/src/LikeC4Styles.tsx

@@ -0,0 +1,107 @@
+import {
+  type CustomColorDefinitions,
+  type ThemeColorValues,
+  defaultTheme,
+  ThemeColors,
+} from '@likec4/core'
+import { useMantineStyleNonce } from '@mantine/core'
+import { mix, scale, toHex, toRgba } from 'khroma'
+import { entries, join, map, pipe, range } from 'remeda'
+import globalsCss from './globals.css?inline'
+import { useLikeC4Specification } from './likec4model'
+
+const scheme = (scheme: 'dark' | 'light') => `[data-mantine-color-scheme="${scheme}"]`
+
+const whenDark = scheme('dark')
+const whenLight = scheme('light')
+
+const MAX_DEPTH = 5
+const generateCompoundColors = (name: string, colors: ThemeColorValues, depth: number) => {
+  const compoundDarkColor = (color: string) =>
+    toHex(
+      scale(color, {
+        l: -22 - 5 * depth,
+        s: -10 - 6 * depth,
+      }),
+    )
+  const compoundLightColor = (color: string) =>
+    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: string, colors: ThemeColorValues): string {
+  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: CustomColorDefinitions) {
+  return pipe(
+    entries(customColors),
+    map(([name, color]) => toStyle(name, color)),
+    join('\n'),
+  )
+}
+
+export function LikeC4Styles() {
+  const nonce = useMantineStyleNonce()?.()
+
+  const customColors = useLikeC4Specification().customColors
+  const customColorsStyles = customColors ? generateCustomColorStyles(customColors) : ''
+
+  return (
+    <>
+      <style type="text/css" data-likec4-global dangerouslySetInnerHTML={{ __html: globalsCss }} nonce={nonce} />
+      <style type="text/css" data-likec4-colors dangerouslySetInnerHTML={{ __html: builtInColors }} nonce={nonce} />
+      {customColorsStyles && (
+        <style
+          type="text/css"
+          data-likec4-custom-colors
+          dangerouslySetInnerHTML={{ __html: customColorsStyles }}
+          nonce={nonce} />
+      )}
+    </>
+  )
+}

package/src/StaticLikeC4Diagram.tsx

@@ -1,8 +1,8 @@
-import type * as aux from '@likec4/core/types/_aux'
+import type { Any, UnknownLayouted } from '@likec4/core/types'
 import { LikeC4Diagram } from './LikeC4Diagram'
 import type { LikeC4DiagramProperties } from './LikeC4Diagram.props'
 
-export type StaticLikeC4DiagramProps<A extends aux.Any> = Pick<
+export type StaticLikeC4DiagramProps<A extends Any> = Pick<
   LikeC4DiagramProperties<A>,
   | 'view'
   | 'className'
@@ -21,7 +21,7 @@ export type StaticLikeC4DiagramProps<A extends aux.Any> = Pick<
   | 'where'
 >
 
-export function StaticLikeC4Diagram<A extends aux.Any = aux.UnknownLayouted>({
+export function StaticLikeC4Diagram<A extends Any = UnknownLayouted>({
   view,
   fitView = true,
   fitViewPadding = '8px',

package/src/base/BaseXYFlow.tsx

@@ -1,4 +1,4 @@
-import { css, cx } from '@likec4/styles/css'
+import { css, cva, cx } from '@likec4/styles/css'
 import { useCallbackRef } from '@mantine/hooks'
 import {
   type ReactFlowProps,
@@ -6,11 +6,11 @@ import {
   ReactFlow,
   useStore,
 } from '@xyflow/react'
-import { Fragment, useMemo } from 'react'
+import { Fragment } from 'react'
 import type { SetRequired, Simplify } from 'type-fest'
 import { useUpdateEffect } from '../hooks/useUpdateEffect'
 import { useIsZoomTooSmall, useXYStoreApi } from '../hooks/useXYFlow'
-import type { PaddingWithUnit } from '../LikeC4Diagram.props'
+import type { ViewPadding } from '../LikeC4Diagram.props'
 import { stopPropagation } from '../utils/xyflow'
 import { type XYBackground, Background } from './Background'
 import { MaxZoom, MinZoom } from './const'
@@ -23,7 +23,7 @@ export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Ed
     nodesSelectable?: boolean
     nodesDraggable?: boolean
     background?: 'transparent' | 'solid' | XYBackground
-    fitViewPadding?: PaddingWithUnit | undefined
+    fitViewPadding?: ViewPadding | undefined
     onViewportResize?: undefined | (() => void)
   }
   & SetRequired<
@@ -44,32 +44,26 @@ export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Ed
   >
 >
 
-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]}',
+const cssReactFlow = cva({
+  base: {
+    '& .react-flow__pane': {
+      WebkitUserSelect: 'none',
+    },
+    '& .react-flow__attribution': {
+      display: 'none',
+    },
   },
-  '& .react-flow__pane': {
-    WebkitUserSelect: '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}',
+      },
+    },
   },
 })
 
@@ -106,8 +100,9 @@ export const BaseXYFlow = <
       nodes={nodes}
       edges={edges}
       className={cx(
-        cssReactFlow,
-        background === 'transparent' && cssTransparentBg,
+        cssReactFlow({
+          transparent: background === 'transparent',
+        }),
         className,
       )}
       {...isZoomTooSmall && {
@@ -122,12 +117,12 @@ export const BaseXYFlow = <
       maxZoom={zoomable ? MaxZoom : 1}
       minZoom={zoomable ? MinZoom : 1}
       fitView={fitView}
-      fitViewOptions={useMemo(() => ({
+      fitViewOptions={{
         minZoom: MinZoom,
         maxZoom: 1,
         padding: fitViewPadding,
         includeHiddenNodes: false,
-      }), [fitViewPadding])}
+      }}
       preventScrolling={zoomable || pannable}
       defaultMarkerColor="var(--xy-edge-stroke)"
       noDragClassName="nodrag"

package/src/base/primitives/MarkdownBlock.tsx

@@ -1,7 +1,8 @@
 import { type RichTextOrEmpty as RichTextType } from '@likec4/core/types'
 import { cx } from '@likec4/styles/css'
 import { type BoxProps, Box } from '@likec4/styles/jsx'
-import { type MarkdownBlockVariant, markdownBlock } from '@likec4/styles/recipes'
+import { markdownBlock } from '@likec4/styles/recipes'
+import type { JsxStyleProps } from '@likec4/styles/types'
 import { Text } from '@mantine/core'
 import { forwardRef } from 'react'
 
@@ -14,10 +15,17 @@ 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
@@ -44,7 +52,7 @@ export const MarkdownBlock = forwardRef<HTMLDivElement, MarkdownBlockProps>(({
   }
   const content = value.nonEmpty
     ? { dangerouslySetInnerHTML: { __html: value.html } }
-    : { children: <Text component="span" fz={'xs'} c="dimmed">{emptyText}</Text> }
+    : { children: <Text component="span" fz={'xs'} c="dimmed" style={{ userSelect: 'none' }}>{emptyText}</Text> }
   return (
     <Box
       ref={ref}

package/src/base/primitives/compound/CompoundActionButton.tsx

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

package/src/base/primitives/compound/CompoundDetailsButton.tsx

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

package/src/base/primitives/compound/CompoundNodeContainer.css.ts

@@ -1,14 +1,5 @@
 import { css, sva } from '@likec4/styles/css'
 
-// export const _compoundOpacity = '--_compound-opacity'
-// const compoundOpacity = `var(${_compoundOpacity})`
-// // const varCompoundOpacity = createVar('compound-opacity')
-
-// export const _borderTransparency = '--_compound-border-transparency'
-// const borderTransparency = `var(${_borderTransparency})`
-
-// export const _borderWidth =
-// const borderWidth = `var(${_borderWidth})`
 export const borderWidth = {
   var: '--_border-width',
   ref: 'var(--_border-width, 2px)',
@@ -46,7 +37,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',
   },
@@ -84,7 +75,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({
@@ -108,12 +99,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))]`,
   },
 })
 

package/src/base/primitives/compound/CompoundNodeContainer.tsx

@@ -62,9 +62,6 @@ export function CompoundNodeContainer({
   return (
     <m.div
       className={cx(
-        css({
-          likec4Palette: `${data.color}.${depth}`,
-        }),
         classes.root,
         'likec4-compound-node',
         className,

package/src/base/primitives/compound/CompoundTitle.tsx

@@ -19,10 +19,10 @@ 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) &`]: {
@@ -30,7 +30,7 @@ const titleContainer = css({
     cursor: 'grab',
   },
   [`.likec4-compound-node:has(.compound-action) &`]: {
-    paddingLeft: '22px',
+    paddingLeft: '[22px]',
   },
 })
 
@@ -41,11 +41,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/src/base/primitives/compound/actionbtns.css.ts

@@ -5,14 +5,14 @@ export 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/src/base/primitives/edge/EdgeActionButton.tsx

@@ -1,8 +1,8 @@
 import { cx } from '@likec4/styles/css'
+import { edgeActionBtn } from '@likec4/styles/recipes'
 import { ActionIcon } from '@mantine/core'
 import { IconZoomScan } from '@tabler/icons-react'
 import { stopPropagation } from '../../../utils/xyflow'
-import { actionBtn } from './edge.css'
 
 type EdgeActionBtnProps = {
   icon?: React.ReactNode
@@ -12,7 +12,7 @@ type EdgeActionBtnProps = {
 export function EdgeActionButton({ icon, onClick }: EdgeActionBtnProps) {
   return (
     <ActionIcon
-      className={cx('nodrag nopan', actionBtn)}
+      className={cx('nodrag nopan', edgeActionBtn())}
       onPointerDownCapture={stopPropagation}
       onClick={onClick}
       role="button"

package/src/base/primitives/edge/EdgeContainer.tsx

@@ -1,6 +1,6 @@
 import { invariant } from '@likec4/core'
 import type { DiagramEdge } from '@likec4/core/types'
-import { css, cx } from '@likec4/styles/css'
+import { cx } from '@likec4/styles/css'
 import { type PropsWithChildren } from 'react'
 import type { UndefinedOnPartialDeep } from 'type-fest'
 import type { EdgeProps } from '../../types'
@@ -38,12 +38,9 @@ export function EdgeContainer({
 }: EdgeContainerProps) {
   const props = {
     className: cx(
-      css({
-        likec4RelationPalette: color,
-      }),
-      styles.edgeVars,
-      styles.edgeContainer,
       className,
+      styles.edgeContainer,
+      'likec4-edge-container',
     ),
     'data-likec4-color': color,
     'data-edge-dir': data.dir ?? 'forward',