@likec4/diagram 1.34.2 → 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 = {
@@ -31,6 +30,25 @@ export type LikeC4ColorScheme = 'light' | 'dark';
 export type OverrideReactFlowProps = Pick<XYFlowProps, 'paneClickDistance' | 'nodeClickDistance' | 'selectionKeyCode' | 'panActivationKeyCode' | 'multiSelectionKeyCode' | 'zoomActivationKeyCode' | 'snapToGrid' | 'snapGrid' | 'onlyRenderVisibleElements' | 'nodesDraggable' | 'nodesFocusable' | 'elementsSelectable' | 'selectNodesOnDrag' | 'panOnDrag' | 'preventScrolling' | 'zoomOnScroll' | 'zoomOnPinch' | 'panOnScroll' | 'panOnScrollSpeed' | 'panOnScrollMode' | 'zoomOnDoubleClick' | 'nodeDragThreshold'>;
 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>;
     className?: string | undefined;
@@ -51,10 +69,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
@@ -63,8 +82,29 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
     /**
      * Padding around the diagram
      * @default '8px'
-     */
-    fitViewPadding?: PaddingWithUnit | undefined;
+     *
+     * @see {@link ViewPadding}
+     *
+     * @example
+     * ```tsx
+     * <LikeC4Diagram
+     *   fitViewPadding={{
+     *     x: '16px',
+     *     y: '16px',
+     *   }}
+     * />
+     *
+     * <LikeC4Diagram
+     *   fitViewPadding={{
+     *     top: '8px',
+     *     right: '8px',
+     *     bottom: '8px',
+     *     left: '8px',
+     *   }}
+     * />
+     * ```
+     */
+    fitViewPadding?: ViewPadding | undefined;
     /**
      * @default false if readonly
      */
@@ -149,8 +189,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;
     /**
@@ -160,6 +201,11 @@ export interface LikeC4DiagramProperties<A extends aux.Any> {
     renderIcon?: ElementIconRenderer | undefined;
     /**
      * Customize layout of the controls on the top left
+     *
+     * @note
+     * Ignored if `controls="next"`
+     *
+     * @see {@link controls}
      */
     renderControls?: ControlsCustomLayout | undefined;
     /**
@@ -186,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 { Any, Unknown } from '@likec4/core/types';
+import { aux } from '@likec4/core/types';
 import { PropsWithChildren } from 'react';
-export type LikeC4ModelProviderProps<A extends Any> = PropsWithChildren<{
+export interface LikeC4ModelProviderProps<A extends aux.Any = aux.Unknown> {
     likec4model: LikeC4Model<A>;
-}>;
+}
 /**
  * Ensures LikeC4Model context
  */
-export declare function LikeC4ModelProvider<A extends Any = 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.d.ts

@@ -1,6 +1,6 @@
 import { ReactFlowProps } from '@xyflow/react';
 import { SetRequired, Simplify } from 'type-fest';
-import { PaddingWithUnit } from '../LikeC4Diagram.props';
+import { ViewPadding } from '../LikeC4Diagram.props';
 import { XYBackground } from './Background';
 import { Base } from './types';
 export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Edge> = Simplify<{
@@ -9,7 +9,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<Omit<ReactFlowProps<NodeType, EdgeType>, 'defaultNodes' | 'defaultEdges' | 'onNodeDoubleClick' | 'onEdgeDoubleClick' | 'fitViewOptions'>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'>>;
 export declare const BaseXYFlow: <NodeType extends Base.Node, EdgeType extends Base.Edge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, onMoveEnd, ...props }: BaseXYFlowProps<NodeType, EdgeType>) => import("react/jsx-runtime").JSX.Element;

package/dist/base/BaseXYFlow.js

@@ -1,8 +1,8 @@
 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 { useMemo, Fragment } from 'react';
+import { Fragment } from 'react';
 import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
 import { useIsZoomTooSmall, useXYStoreApi } from '../hooks/useXYFlow.js';
 import { stopPropagation } from '../utils/xyflow.js';
@@ -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 && {
@@ -82,12 +79,12 @@ const BaseXYFlow = ({
       maxZoom: zoomable ? MaxZoom : 1,
       minZoom: zoomable ? MinZoom : 1,
       fitView,
-      fitViewOptions: useMemo(() => ({
+      fitViewOptions: {
         minZoom: MinZoom,
         maxZoom: 1,
         padding: fitViewPadding,
         includeHiddenNodes: false
-      }), [fitViewPadding]),
+      },
       preventScrolling: zoomable || pannable,
       defaultMarkerColor: "var(--xy-edge-stroke)",
       noDragClassName: "nodrag",

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

@@ -7,7 +7,7 @@ import { useDebouncedValue } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.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';
 
 function CompoundActionButton({
   data: {
@@ -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

@@ -7,7 +7,7 @@ import { useDebouncedValue } from '@mantine/hooks';
 import * as m from 'motion/react-m';
 import { stopPropagation } from '../../../utils/xyflow.js';
 import { compoundActionBtn } from './actionbtns.css.js';
-import IconId from '../../../node_modules/.pnpm/@tabler_icons-react@3.31.0_react@19.1.0/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconId from '../../../node_modules/.pnpm/@tabler_icons-react@3.34.1_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
 
 function CompoundDetailsButton({
   data: {
@@ -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.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';
 
 function EdgeActionButton({ icon, onClick }) {
   return /* @__PURE__ */ jsx(
     ActionIcon,
     {
-      className: cx("nodrag nopan", actionBtn),
+      className: cx("nodrag nopan", edgeActionBtn()),
       onPointerDownCapture: stopPropagation,
       onClick,
       role: "button",