@likec4/diagram 1.38.1 → 1.39.1

package/dist/LikeC4Diagram.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId } from '@mantine/hooks';
 import { ReactFlowProvider } from '@xyflow/react';
 import { useRef } from 'react';
 import { ControlsCustomLayoutProvider } from './context/ControlsCustomLayout.js';
@@ -57,6 +58,7 @@ function LikeC4Diagram({
   renderNodes,
   children
 }) {
+  const id = useId().replace("mantine-", "likec4-");
   const initialRef = useRef(null);
   if (initialRef.current == null) {
     initialRef.current = {
@@ -109,8 +111,8 @@ function LikeC4Diagram({
                 onBurgerMenuClick
               },
               children: /* @__PURE__ */ jsxs(ReduceGraphicsContext, { reduceGraphics: isReducedGraphicsMode, children: [
-                /* @__PURE__ */ jsx(LikeC4Styles, {}),
-                /* @__PURE__ */ jsx(RootContainer, { className, reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(LikeC4Styles, { id }),
+                /* @__PURE__ */ jsx(RootContainer, { id, className, reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsx(
                   ReactFlowProvider,
                   {
                     fitView,

package/dist/LikeC4Diagram.props.d.ts

@@ -1,9 +1,16 @@
-import { Any, aux, DiagramEdge, DiagramNode, LayoutedView, ViewChange, WhereOperator } from '@likec4/core/types';
+import { 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 t from '@likec4/core/types';
+type Any = t.aux.Any;
+type ViewId<A> = t.aux.ViewId<A>;
+type Fqn<A> = t.aux.Fqn<A>;
+type RelationId = t.aux.RelationId;
+type DeploymentFqn<A> = t.aux.DeploymentFqn<A>;
+type StrictViewId<A> = t.aux.StrictViewId<A>;
 export type { CustomNodes, WhereOperator };
 export type DiagramNodeWithNavigate<A extends Any> = SetRequired<DiagramNode<A>, 'navigateTo'>;
 export type ElementIconRendererProps = {
@@ -15,7 +22,7 @@ export type ElementIconRendererProps = {
     className?: string;
 };
 export type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode;
-export type OnNavigateTo<A extends Any = Any> = (to: aux.ViewId<A>, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate<A>) => void;
+export type OnNavigateTo<A extends Any = Any> = (to: ViewId<A>, event?: ReactMouseEvent, element?: DiagramNodeWithNavigate<A>) => void;
 export type OnNodeClick<A extends Any = Any> = (node: DiagramNode<A>, event: ReactMouseEvent) => void;
 export type OnEdgeClick<A extends Any = Any> = (edge: DiagramEdge<A>, event: ReactMouseEvent) => void;
 /**
@@ -221,18 +228,18 @@ export interface LikeC4DiagramProperties<A extends Any = Any> {
      */
     reactFlowProps?: OverrideReactFlowProps | undefined;
 }
-export type OpenSourceParams<A extends aux.Any = aux.Any> = {
-    element: aux.Fqn<A>;
+export type OpenSourceParams<A extends Any = Any> = {
+    element: Fqn<A>;
     property?: string;
 } | {
-    relation: aux.RelationId;
+    relation: RelationId;
 } | {
-    deployment: aux.DeploymentFqn<A>;
+    deployment: DeploymentFqn<A>;
     property?: string;
 } | {
-    view: aux.StrictViewId<A>;
+    view: StrictViewId<A>;
 };
-export interface LikeC4DiagramEventHandlers<A extends aux.Any = aux.Any> {
+export interface LikeC4DiagramEventHandlers<A extends Any = Any> {
     onChange?: OnChange | null | undefined;
     onNavigateTo?: OnNavigateTo<A> | null | undefined;
     onNodeClick?: OnNodeClick<A> | null | undefined;

package/dist/LikeC4Styles.d.ts

@@ -1 +1,3 @@
-export declare function LikeC4Styles(): import("react/jsx-runtime").JSX.Element;
+export declare function LikeC4Styles({ id }: {
+    id: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/LikeC4Styles.js

@@ -11,7 +11,7 @@ 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 generateCompoundColors = (rootSelector, name, colors, depth) => {
   const compoundDarkColor = (color) => toHex(
     scale(color, {
       l: -22 - 5 * depth,
@@ -24,7 +24,7 @@ const generateCompoundColors = (name, colors, depth) => {
       s: -3 - 6 * depth
     })
   );
-  const selector = `:where([data-likec4-color="${name}"][data-compound-depth="${depth}"])`;
+  const selector = `:where(${rootSelector} [data-likec4-color="${name}"][data-compound-depth="${depth}"])`;
   return `
 ${selector} {
   --likec4-palette-fill: ${compoundLightColor(colors.elements.fill)};
@@ -36,8 +36,8 @@ ${whenDark} ${selector} {
 }
   `.trim();
 };
-function toStyle(name, colors) {
-  const selector = `:where([data-likec4-color=${name}])`;
+function toStyle(rootSelector, name, colors) {
+  const selector = `:where(${rootSelector} [data-likec4-color=${name}])`;
   return [
     `
 ${selector} {
@@ -57,36 +57,68 @@ ${whenDark} ${selector} {
 }
 
   `.trim(),
-    ...range(1, MAX_DEPTH + 1).map((depth) => generateCompoundColors(name, colors, depth))
+    ...range(1, MAX_DEPTH + 1).map((depth) => generateCompoundColors(rootSelector, 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) {
+function generateCustomColorStyles(customColors, rootSelector) {
   return pipe(
     entries(customColors),
-    map(([name, color]) => toStyle(name, color)),
+    map(([name, color]) => toStyle(rootSelector, name, color)),
     join("\n")
   );
 }
-function LikeC4Styles() {
+function generateBuiltInColorStyles(rootSelector) {
+  return pipe(
+    ThemeColors,
+    map(
+      (color) => toStyle(rootSelector, color, {
+        elements: defaultTheme.elements[color],
+        relationships: defaultTheme.relationships[color]
+      })
+    ),
+    join("\n")
+  );
+}
+function LikeC4Styles({ id }) {
+  const rootSelector = `#${id}`;
   const nonce = useMantineStyleNonce()?.();
   const { customColors } = useLikeC4Specification();
-  const customColorsStyles = customColors ? generateCustomColorStyles(customColors) : "";
-  return /* @__PURE__ */ jsx(MemoizedStyles, { nonce, customColorsStyles, builtInColors });
+  const customColorsStyles = customColors ? generateCustomColorStyles(customColors, rootSelector) : "";
+  const builtInColors = generateBuiltInColorStyles(rootSelector);
+  return /* @__PURE__ */ jsx(
+    MemoizedStyles,
+    {
+      id,
+      nonce,
+      customColorsStyles,
+      builtInColors
+    }
+  );
 }
-const MemoizedStyles = memo(({ nonce, customColorsStyles, builtInColors: builtInColors2 }) => /* @__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: builtInColors2 }, nonce }),
+const MemoizedStyles = memo(({ id, nonce, customColorsStyles, builtInColors }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(
+    "style",
+    {
+      type: "text/css",
+      "data-likec4-global": id,
+      dangerouslySetInnerHTML: { __html: globalsCss.replaceAll(".likec4-root", `#${id}.likec4-root`) },
+      nonce
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "style",
+    {
+      type: "text/css",
+      "data-likec4-colors": id,
+      dangerouslySetInnerHTML: { __html: builtInColors },
+      nonce
+    }
+  ),
   customColorsStyles && /* @__PURE__ */ jsx(
     "style",
     {
       type: "text/css",
-      "data-likec4-custom-colors": true,
+      "data-likec4-custom-colors": id,
       dangerouslySetInnerHTML: { __html: customColorsStyles },
       nonce
     }

package/dist/base/BaseXYFlow.js

@@ -9,7 +9,7 @@ import { roundDpr } from '../utils/roundDpr.js';
 import { stopPropagation } from '../utils/xyflow.js';
 import { Background } from './Background.js';
 import { MinZoom, MaxZoom } from './const.js';
-import { setHovered } from './types.Base.js';
+import { Base } from './types.js';
 
 const BaseXYFlow = ({
   nodes,
@@ -104,7 +104,7 @@ const BaseXYFlow = ({
           onNodesChange([{
             id: node.id,
             type: "replace",
-            item: setHovered(node, true)
+            item: Base.setHovered(node, true)
           }]);
         }
       }),
@@ -117,7 +117,7 @@ const BaseXYFlow = ({
           onNodesChange([{
             id: node.id,
             type: "replace",
-            item: setHovered(node, false)
+            item: Base.setHovered(node, false)
           }]);
         }
       }),
@@ -130,7 +130,7 @@ const BaseXYFlow = ({
           onEdgesChange([{
             id: edge.id,
             type: "replace",
-            item: setHovered(edge, true)
+            item: Base.setHovered(edge, true)
           }]);
         }
       }),
@@ -143,7 +143,7 @@ const BaseXYFlow = ({
           onEdgesChange([{
             id: edge.id,
             type: "replace",
-            item: setHovered(edge, false)
+            item: Base.setHovered(edge, false)
           }]);
         }
       }),

package/dist/base/index.d.ts

@@ -1,3 +1,2 @@
 export { BaseXYFlow, type BaseXYFlowProps } from './BaseXYFlow';
-export { type EdgeProps, type NodeProps, type NonOptional, type ReactFlowEdge, type ReactFlowNode, } from './types';
-export * as Base from './types.Base';
+export { Base, type EdgeProps, type NodeProps, type NonOptional, type ReactFlowEdge, type ReactFlowNode, } from './types';

package/dist/base/primitives/MarkdownBlock.js

@@ -25,7 +25,8 @@ const MarkdownBlock = forwardRef(({
       ...props,
       className: cx(
         markdownBlock({
-          uselikec4palette
+          uselikec4palette,
+          value: value.isMarkdown ? "markdown" : "plaintext"
         }),
         className
       ),

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

@@ -1,4 +1,4 @@
 import { FunctionComponent } from 'react';
-import { Base, EdgeProps } from '../types';
-export declare const edgePropsEqual: <P extends Record<string, unknown> = Base.EdgeData>(prev: EdgeProps<P>, next: EdgeProps<P>) => boolean;
-export declare function customEdge<P extends Record<string, unknown> = Base.EdgeData>(Edge: FunctionComponent<EdgeProps<P>>): FunctionComponent<EdgeProps<P>>;
+import { EdgeProps } from '../types';
+export declare const edgePropsEqual: <P extends EdgeProps<any>>(prev: P, next: P) => boolean;
+export declare function customEdge<P extends Record<string, unknown> = {}>(Edge: FunctionComponent<EdgeProps<P>>): FunctionComponent<EdgeProps<P>>;

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

@@ -35,8 +35,7 @@ const EdgeLabel = forwardRef(({
       className: cx(classes.root, "likec4-edge-label", className),
       "data-edge-id": id,
       animate: {
-        originY: 0.25,
-        scale: isHovered && !selected ? 1.08 : 1
+        scale: isHovered && !selected ? 1.06 : 1
       },
       ...rest,
       children: [

package/dist/base/primitives/element/ElementTitle.js

@@ -56,7 +56,7 @@ function ElementTitle({ id, data, iconSize }) {
               children: data.technology
             }
           ),
-          data.description?.nonEmpty && (data.description.isMarkdown ? /* @__PURE__ */ jsx(
+          data.description?.nonEmpty && /* @__PURE__ */ jsx(
             MarkdownBlock,
             {
               className: cx(classes.description, "likec4-element-description"),
@@ -66,15 +66,7 @@ function ElementTitle({ id, data, iconSize }) {
               maxHeight: data.description.isMarkdown ? "8rem" : void 0,
               lineClamp: isSmOrXs ? 3 : 5
             }
-          ) : /* @__PURE__ */ jsx(
-            Text,
-            {
-              component: "div",
-              className: cx(classes.description, "likec4-element-description"),
-              lineClamp: isSmOrXs ? 3 : 5,
-              children: data.description.text
-            }
-          ))
+          )
         ] })
       ]
     }

package/dist/base/types.d.ts

@@ -1,6 +1,63 @@
-import { Edge as RFEdge, EdgeProps as ReactFlowEdgeProps, Node as RFNode, NodeProps as ReactFlowNodeProps } from '@xyflow/react';
 import { OptionalKeysOf, SetRequired, Simplify } from 'type-fest';
-import * as Base from './types.Base';
+import type * as RF from '@xyflow/react';
+type RFNode<NodeData extends Record<string, unknown> = Record<string, unknown>, NodeType extends string | undefined = string | undefined> = RF.Node<NodeData, NodeType>;
+type RFEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>, EdgeType extends string | undefined = string | undefined> = RF.Edge<EdgeData, EdgeType>;
+type ReactFlowNodeProps<NodeData extends Record<string, unknown> = Record<string, unknown>, NodeType extends string | undefined = string | undefined> = RF.NodeProps<RFNode<NodeData, NodeType>>;
+type ReactFlowEdgeProps<EdgeData extends Record<string, unknown> = Record<string, unknown>, EdgeType extends string | undefined = string | undefined> = RF.EdgeProps<RFEdge<EdgeData, EdgeType>>;
+export declare namespace Base {
+    export type Dimmed = 'immediate' | boolean;
+    export type NodeData = {
+        /**
+         * Whether the cursor is hovering over the node
+         */
+        hovered?: boolean;
+        /**
+         * Whether the node is dimmed
+         * 'immediate' means that the node is dimmed without delay
+         */
+        dimmed?: Dimmed;
+    };
+    export type Node = RFNode<NodeData>;
+    export type NodeProps = ReactFlowNodeProps<RFNode<NodeData, any>>;
+    export type EdgeData = {
+        /**
+         * Whether the cursor is hovering over the edge
+         */
+        hovered?: boolean;
+        /**
+         * Whether the edge is active (animated and highlighted)
+         */
+        active?: boolean;
+        /**
+         * Whether the edge is dimmed
+         * 'immediate' means that the edge is dimmed without delay
+         */
+        dimmed?: Dimmed;
+    };
+    export type Edge = Simplify<Omit<RFEdge, 'data'> & {
+        data: EdgeData;
+    }>;
+    type WithDimmed = {
+        data: {
+            dimmed?: Dimmed;
+        };
+    };
+    type WithHovered = {
+        data: {
+            hovered?: boolean;
+        };
+    };
+    export function setDimmed<T extends WithDimmed>(value: T, dimmed: 'immediate' | boolean): T;
+    export function setDimmed(dimmed: 'immediate' | boolean): <T extends WithDimmed>(value: T) => T;
+    export function setHovered<T extends WithHovered>(value: T, hovered: boolean): T;
+    export function setHovered(hovered: boolean): <T extends WithHovered>(value: T) => T;
+    type WithData<D> = {
+        data: D;
+    };
+    export function setData<E extends WithData<any>>(value: E, state: Partial<E['data']>): E;
+    export function setData<E extends WithData<any>>(state: Partial<E['data']>): (value: E) => E;
+    export {};
+}
 /**
  * To cooperate with `exactOptionalPropertyTypes` in `tsconfig.json`
  *
@@ -26,11 +83,11 @@ export type NonOptional<T extends object, Keys extends OptionalKeysOf<T> = Optio
 /**
  * ReactFlow Custom Node properties with BaseNodeData at least
  */
-export type NodeProps<T extends Record<string, unknown> = {}, NodeType extends string = string> = Simplify<ReactFlowNodeProps<RFNode<Base.NodeData & T, NodeType>>>;
+export type NodeProps<T extends Record<string, unknown> = {}, NodeType extends string = string> = Simplify<ReactFlowNodeProps<Base.NodeData & T, NodeType>>;
 /**
  * ReactFlow Custom Edge properties with BaseEdgeData at least
  */
-export type EdgeProps<T extends Record<string, unknown> = {}, EdgeType extends string = string> = SetRequired<Simplify<ReactFlowEdgeProps<RFEdge<Base.EdgeData & T, EdgeType>>>, 'data'>;
+export type EdgeProps<T extends Record<string, unknown> = {}, EdgeType extends string = string> = SetRequired<Simplify<ReactFlowEdgeProps<Base.EdgeData & T, EdgeType>>, 'data'>;
 export type ReactFlowNode<Data extends Record<string, unknown>, NodeType extends string> = SetRequired<RFNode<Data, NodeType>, 'type' | 'initialWidth' | 'initialHeight'>;
 export type ReactFlowEdge<Data extends Record<string, unknown>, EdgeType extends string> = SetRequired<RFEdge<Data, EdgeType>, 'type' | 'data'>;
-export * as Base from './types.Base';
+export {};

package/dist/base/types.js

@@ -0,0 +1,54 @@
+import { hasSubObject } from 'remeda';
+
+var Base;
+((Base2) => {
+  const _setDimmed = (v, dimmed) => (v.data.dimmed ?? false) === dimmed ? v : {
+    ...v,
+    data: {
+      ...v.data,
+      dimmed
+    }
+  };
+  function setDimmed(arg1, arg2) {
+    if (arg2 !== void 0) {
+      return _setDimmed(arg1, arg2);
+    }
+    return (v) => _setDimmed(v, arg1);
+  }
+  Base2.setDimmed = setDimmed;
+  const _setHovered = (v, hovered) => (v.data.hovered ?? false) === hovered ? v : {
+    ...v,
+    data: {
+      ...v.data,
+      hovered
+    }
+  };
+  function setHovered(arg1, arg2) {
+    if (arg2 !== void 0) {
+      return _setHovered(arg1, arg2);
+    }
+    return (v) => _setHovered(v, arg1);
+  }
+  Base2.setHovered = setHovered;
+  function _setData(value, state) {
+    if (hasSubObject(value.data, state)) {
+      return value;
+    }
+    return {
+      ...value,
+      data: {
+        ...value.data,
+        ...state
+      }
+    };
+  }
+  function setData(arg1, arg2) {
+    if (arg2 !== void 0) {
+      return _setData(arg1, arg2);
+    }
+    return (edge) => _setData(edge, arg1);
+  }
+  Base2.setData = setData;
+})(Base || (Base = {}));
+
+export { Base };

package/dist/bundle/LikeC4View.d.ts

@@ -1,3 +1,3 @@
-import { Any, UnknownLayouted } from '@likec4/core/types';
 import { LikeC4ViewProps } from './LikeC4View.props';
-export declare function LikeC4View<A extends Any = UnknownLayouted>({ viewId, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;
+import type * as t from '@likec4/core/types';
+export declare function LikeC4View<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, ...props }: LikeC4ViewProps<A>): import("react/jsx-runtime").JSX.Element;

package/dist/bundle/LikeC4View.props.d.ts

@@ -1,11 +1,12 @@
-import { Any, aux, WhereOperator } from '@likec4/core/types';
+import { WhereOperator } from '@likec4/core/types';
 import { CSSProperties } from 'react';
 import { CustomNodes, ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit, ViewPadding } from '../LikeC4Diagram.props';
-export interface LikeC4ViewProps<A extends Any> {
+import type * as t from '@likec4/core/types';
+export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
     /**
      * View to display.
      */
-    viewId: aux.ViewId<A>;
+    viewId: t.aux.ViewId<A>;
     /**
      * Enable/disable panning
      * @default false

package/dist/bundle/ReactLikeC4.d.ts

@@ -1,8 +1,8 @@
-import { Any, aux, UnknownLayouted } from '@likec4/core/types';
 import { CSSProperties } from 'react';
 import { LikeC4DiagramProps } from '../LikeC4Diagram';
-export type ReactLikeC4Props<A extends Any> = Omit<LikeC4DiagramProps<A>, 'view'> & {
-    viewId: aux.ViewId<A>;
+import type * as t from '@likec4/core/types';
+export type ReactLikeC4Props<A extends t.aux.Any = t.aux.UnknownLayouted> = Omit<LikeC4DiagramProps<A>, 'view'> & {
+    viewId: t.aux.ViewId<A>;
     /**
      * Keep aspect ratio of the diagram
      * Disable if you need to manage the viewport (use className)
@@ -27,7 +27,7 @@ export type ReactLikeC4Props<A extends Any> = Omit<LikeC4DiagramProps<A>, 'view'
     /** Function to generate nonce attribute added to all generated `<style />` tags */
     styleNonce?: string | (() => string) | undefined;
 };
-export declare function ReactLikeC4<A extends Any = UnknownLayouted>({ viewId, ...props }: ReactLikeC4Props<A>): import("react/jsx-runtime").JSX.Element;
+export declare function ReactLikeC4<A extends t.aux.Any = t.aux.UnknownLayouted>({ viewId, ...props }: ReactLikeC4Props<A>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ReactLikeC4 {
     var displayName: string;
 }

package/dist/context/RootContainer.d.ts

@@ -1,5 +1,6 @@
 import { PropsWithChildren, RefObject } from 'react';
-export declare function RootContainer({ className, reduceGraphics, children, }: PropsWithChildren<{
+export declare function RootContainer({ id, className, reduceGraphics, children, }: PropsWithChildren<{
+    id: string;
     className?: string | undefined;
     reduceGraphics?: boolean;
 }>): import("react/jsx-runtime").JSX.Element;

package/dist/context/RootContainer.js

@@ -1,18 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
-import { useId } from '@mantine/hooks';
 import { useRef, useEffect, createContext, useContext, createRef } from 'react';
 import { usePanningAtom } from './ReduceGraphics.js';
 import { TagStylesProvider } from './TagStylesContext.js';
 
 const RootContainerContext = createContext(createRef());
 function RootContainer({
+  id,
   className,
   reduceGraphics = false,
   children
 }) {
-  const id = useId();
   const ref = useRef(null);
   const $isPanning = usePanningAtom();
   useEffect(() => {

package/dist/custom/customNodes.d.ts

@@ -1,8 +1,9 @@
 import { NodeModel } from '@likec4/core/model';
-import { Any } from '@likec4/core/types';
+import { aux } from '@likec4/core/types';
 import { FunctionComponent } from 'react';
 import { NodeProps } from '../base/types';
 import { Types } from '../likec4diagram/types';
+type Any = aux.Any;
 type CustomDiagramNodeProps = {
     nodeProps: NodeProps<Types.NodeData, string>;
     nodeModel: NodeModel;

package/dist/globals.css.js

@@ -1,3 +1,3 @@
-const globalsCss = ".likec4-shadow-root dialog{color:var(--mantine-color-text)}.likec4-root{overflow:hidden;position:relative;padding:0;margin:0;width:100%;height:100%;border:0px solid transparent;container-name:likec4-root;container-type:size}.likec4-root .react-flow:is(.not-initialized){opacity:0}.likec4-root .react-flow{contain:paint;--xy-background-color: var(--colors-likec4-background);--xy-background-pattern-color: var(--colors-likec4-background-pattern, var(--colors-likec4-background))}.likec4-root .react-flow:is(.bg-transparent){background:transparent!important;--xy-background-color: transparent !important}.likec4-root .react-flow .react-flow__pane{user-select:none;--webkit-user-select: none}.likec4-static-view .react-flow .react-flow__attribution{display:none}:where(.likec4-root .mantine-ActionIcon-icon) .tabler-icon{width:75%;height:75%}.likec4-root .likec4-edge-label-container{top:0;left:0;position:absolute;width:auto;height:auto}.likec4-root :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed]){opacity:.25}.likec4-root .likec4-edge-label-container:is([data-likec4-dimmed]){opacity:.25}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed]){filter:grayscale(85%) blur(3px)}.likec4-root:not([data-likec4-reduced-graphics]) .likec4-edge-label-container:is([data-likec4-dimmed]){filter:grayscale(85%) blur(3px)}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed=true]){transition-property:opacity,filter;transition-timing-function:cubic-bezier(.5,0,.2,1);transition-duration:.6s}.likec4-root:not([data-likec4-reduced-graphics]) .likec4-edge-label-container:is([data-likec4-dimmed=true]){transition-property:opacity,filter;transition-timing-function:cubic-bezier(.5,0,.2,1);transition-duration:.6s}.likec4-root .react-flow :where(.react-flow__nodes,.react-flow__edges,.react-flow__edgelabel-renderer){display:contents}.likec4-root .react-flow__node.draggable:has(.likec4-compound-node){cursor:default}[data-mantine-color-scheme=dark] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>:where(svg,.likec4-edge-label-container){mix-blend-mode:plus-lighter}[data-mantine-color-scheme=light] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>:where(svg,.likec4-edge-label-container){mix-blend-mode:screen}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-stroke-width: 3;--xy-edge-stroke: var(--likec4-palette-relation-stroke);--xy-edge-stroke-selected: var(--likec4-palette-relation-stroke-selected);--xy-edge-label-color: var(--likec4-palette-relation-label);--xy-edge-label-background-color: var(--likec4-palette-relation-label-bg)}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container):is([data-likec4-hovered=true],[data-edge-active=true]){--xy-edge-stroke-width: 4;--xy-edge-stroke: var(--likec4-palette-relation-stroke-selected)}[data-mantine-color-scheme=dark] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 50%, transparent)}[data-mantine-color-scheme=light] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-color: color-mix(in srgb, var(--likec4-palette-relation-label), rgba(255 255 255 / .85) 40%);--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 60%, transparent)}";
+const globalsCss = ".likec4-shadow-root dialog{color:var(--mantine-color-text)}.likec4-root{overflow:hidden;position:relative;padding:0;margin:0;width:100%;height:100%;border:0px solid transparent;container-name:likec4-root;container-type:size}.likec4-root .react-flow:is(.not-initialized){opacity:0}.likec4-root .react-flow{contain:paint;--xy-background-color: var(--colors-likec4-background);--xy-background-pattern-color: var(--colors-likec4-background-pattern, var(--colors-likec4-background))}.likec4-root .react-flow:is(.bg-transparent){background:transparent!important;--xy-background-color: transparent !important}.likec4-root .react-flow .react-flow__pane{user-select:none;--webkit-user-select: none}.likec4-static-view .react-flow .react-flow__attribution{display:none}:where(.likec4-root .mantine-ActionIcon-icon) .tabler-icon{width:75%;height:75%}.likec4-root .likec4-edge-label-container{top:0;left:0;position:absolute;width:auto;height:auto}.likec4-root :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed]){opacity:.25}.likec4-root .likec4-edge-label-container:is([data-likec4-dimmed]){opacity:.25}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed]){filter:grayscale(85%)}.likec4-root:not([data-likec4-reduced-graphics]) .likec4-edge-label-container:is([data-likec4-dimmed]){filter:grayscale(85%)}.likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__node,.react-flow__edge):has([data-likec4-dimmed=true]){transition-property:opacity,filter;transition-timing-function:cubic-bezier(.5,0,.2,1);transition-duration:.6s}.likec4-root:not([data-likec4-reduced-graphics]) .likec4-edge-label-container:is([data-likec4-dimmed=true]){transition-property:opacity,filter;transition-timing-function:cubic-bezier(.5,0,.2,1);transition-duration:.6s}.likec4-root .react-flow :where(.react-flow__nodes,.react-flow__edges,.react-flow__edgelabel-renderer){display:contents}.likec4-root .react-flow__node.draggable:has(.likec4-compound-node){cursor:default}[data-mantine-color-scheme=dark] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>:where(svg,.likec4-edge-label-container){mix-blend-mode:plus-lighter}[data-mantine-color-scheme=light] .likec4-root:not([data-likec4-reduced-graphics]) :where(.react-flow__edges,.react-flow__edgelabel-renderer)>:where(svg,.likec4-edge-label-container){mix-blend-mode:screen}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-stroke-width: 3;--xy-edge-stroke: var(--likec4-palette-relation-stroke);--xy-edge-stroke-selected: var(--likec4-palette-relation-stroke-selected);--xy-edge-label-color: var(--likec4-palette-relation-label);--xy-edge-label-background-color: var(--likec4-palette-relation-label-bg)}.likec4-root :where(.likec4-edge-container,.likec4-edge-label-container):is([data-likec4-hovered=true],[data-edge-active=true]){--xy-edge-stroke-width: 4;--xy-edge-stroke: var(--likec4-palette-relation-stroke-selected)}[data-mantine-color-scheme=dark] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 50%, transparent)}[data-mantine-color-scheme=light] .likec4-root :where(.likec4-edge-container,.likec4-edge-label-container){--xy-edge-label-color: color-mix(in srgb, var(--likec4-palette-relation-label), rgba(255 255 255 / .85) 40%);--xy-edge-label-background-color: color-mix(in srgb, var(--likec4-palette-relation-label-bg) 60%, transparent)}";
 
 export { globalsCss as default };