@likec4/diagram 1.30.0 → 1.31.0

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

@@ -3,7 +3,7 @@ import { invariant, defaultTheme } from '@likec4/core';
 import { Tooltip as Tooltip$1, ActionIcon } from '@mantine/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { IconFileSymlink, IconTransform } from '@tabler/icons-react';
-import { r as reactExports } from '../../../../_virtual/index.js';
+import { useState } from 'react';
 import { keys } from 'remeda';
 import { useDiagram } from '../../../../hooks/useDiagram.js';
 import { useDiagramEventHandlers } from '../../../../context/DiagramEventHandlers.js';
@@ -36,7 +36,7 @@ const Tooltip = Tooltip$1.withProps({
 function useHandlers(target, props) {
   const { onChange: triggerOnChange } = useDiagramEventHandlers();
   const diagram = useDiagram();
-  const [originalColor, setOriginalColor] = reactExports.useState(null);
+  const [originalColor, setOriginalColor] = useState(null);
   const onColorPreview = useCallbackRef((color) => {
     if (color === null) {
       invariant(originalColor, "originalColor is null");

package/dist/likec4diagram/types.d.ts

@@ -1,18 +1,21 @@
 import { DiagramEdge, DiagramNode, Fqn, IconUrl, ViewId } from '@likec4/core';
 import { XYPosition } from '@xyflow/system';
 import { OptionalKeysOf, Simplify } from 'type-fest';
-import { Base } from '../base';
-import { ReactFlowEdge, ReactFlowNode } from '../base/types';
+import { Base, ReactFlowEdge, ReactFlowNode } from '../base/types';
 type NonOptional<T extends object> = Simplify<{
     [P in Exclude<keyof T, OptionalKeysOf<T>>]: T[P];
 } & {
     [P in OptionalKeysOf<T>]-?: T[P] | undefined;
 }>;
 export declare namespace Types {
-    type LeafNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'position'>> & {
+    type LeafNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'technology' | 'description' | 'color' | 'shape' | 'width' | 'level' | 'height' | 'style' | 'position'>> & {
+        /**
+         * View this node belongs to
+         */
+        viewId: ViewId;
         isMultiple?: boolean | undefined;
         icon: string | null;
-    }>;
+    };
     /**
      * Represents element from logical model
      */
@@ -32,10 +35,14 @@ export declare namespace Types {
         deploymentFqn: Fqn;
         modelFqn: Fqn | null;
     };
-    type CompoundNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'style' | 'position'>> & {
+    type CompoundNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'style' | 'position'>> & {
+        /**
+         * View this node belongs to
+         */
+        viewId: ViewId;
         depth: number;
         icon?: IconUrl;
-    }>;
+    };
     type CompoundElementNodeData = CompoundNodeData & {
         modelFqn: Fqn;
         deploymentFqn?: never;
@@ -65,11 +72,12 @@ export declare namespace Types {
     type ViewGroupNode = ReactFlowNode<ViewGroupNodeData, 'view-group'>;
     type Node = ElementNode | DeploymentElementNode | CompoundElementNode | CompoundDeploymentNode | ViewGroupNode;
     type NodeData = Node['data'];
-    type RelationshipEdgeData = Base.EdgeData<NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'labelBBox' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'notes'>> & {
+    type RelationshipEdgeData = Simplify<Base.EdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'labelBBox' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo' | 'notes'>> & {
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
     }>;
     type RelationshipEdge = ReactFlowEdge<RelationshipEdgeData, 'relationship'>;
     type Edge = RelationshipEdge;
+    type EdgeData = RelationshipEdgeData;
 }
 export {};

package/dist/likec4diagram/ui/controls/ChangeAutoLayoutButton.js

@@ -3,7 +3,7 @@ import { Popover, PopoverTarget, PopoverDropdown, Box, FloatingIndicator, Text,
 import { useHover, useUncontrolled, clampUseMovePosition, useMove, useMergedRef } from '@mantine/hooks';
 import { useDebouncedCallback } from '@react-hookz/web';
 import { IconLayoutDashboard } from '@tabler/icons-react';
-import { r as reactExports } from '../../../_virtual/index.js';
+import { useState, forwardRef } from 'react';
 import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram.js';
 import { Tooltip, ActionIcon } from './_shared.js';
 import { autolayoutIndicator, autolayoutButton, spacingSliderBody, spacingSliderThumb } from './styles.css.js';
@@ -18,8 +18,8 @@ const ChangeAutoLayoutButton = (props) => {
     onChange
   } = useDiagramEventHandlers();
   const diagram = useDiagram();
-  const [rootRef, setRootRef] = reactExports.useState(null);
-  const [controlsRefs, setControlsRefs] = reactExports.useState({});
+  const [rootRef, setRootRef] = useState(null);
+  const [controlsRefs, setControlsRefs] = useState({});
   const {
     autoLayout,
     viewId
@@ -103,7 +103,7 @@ const ChangeAutoLayoutButton = (props) => {
   );
 };
 const MAX_SPACING = 400;
-const SpacingSliders = reactExports.forwardRef(({
+const SpacingSliders = forwardRef(({
   isVertical,
   nodeSep,
   rankSep,

package/dist/likec4diagram/ui/controls/Controls.js

@@ -3,7 +3,7 @@ import { cx } from '@likec4/styles/css';
 import { ActionIconGroup, Group, Stack, Box, Badge, Loader } from '@mantine/core';
 import { IconFileSymlink, IconFocusCentered, IconMenu2 } from '@tabler/icons-react';
 import { m, LayoutGroup } from 'motion/react';
-import { r as reactExports } from '../../../_virtual/index.js';
+import { memo } from 'react';
 import { useControlsCustomLayout } from '../../../context/ControlsCustomLayout.js';
 import { useDiagramContext, useDiagram, useDiagramSyncLayoutState } from '../../../hooks/useDiagram.js';
 import { LikeC4Search } from '../search/LikeC4Search.js';
@@ -70,7 +70,7 @@ const ControlsDefaultLayout = ({
     ]
   }
 );
-const Controls = reactExports.memo(() => {
+const Controls = memo(() => {
   const { viewId, hasLayoutDrift, viewportChanged, isNotActiveWalkthrough } = useDiagramContext((c) => ({
     viewId: c.view.id,
     hasLayoutDrift: c.view.hasLayoutDrift ?? false,

package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
 import { Card, CardSection, Button, Group, Text, Spoiler, Stack } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
 import { IconMenu } from '@tabler/icons-react';
-import clsx from 'clsx';
 import { AnimatePresence, m } from 'motion/react';
 import { Link } from '../../../components/Link.js';
 import { useDiagramContext } from '../../../hooks/useDiagram.js';
@@ -30,7 +30,7 @@ function DiagramTitlePanel() {
         opacity: 0.05,
         scale: 0.6
       },
-      className: clsx("react-flow__panel", "left", "bottom"),
+      className: cx("react-flow__panel", "left", "bottom"),
       style: {
         transformOrigin: "left center"
       },

package/dist/likec4diagram/ui/notation/NotationPanel.js

@@ -1,12 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@likec4/core';
 import { cx, css } from '@likec4/styles/css';
 import { Tooltip, ThemeIcon, ActionIcon, Paper, Tabs, TabsList, TabsTab, TabsPanel, ScrollAreaAutosize, Stack, Card, Group, Box, Badge, Text } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
 import { IconAlertTriangle, IconHelpCircle, IconArrowDownRight } from '@tabler/icons-react';
-import clsx from 'clsx';
 import { AnimatePresence, m } from 'motion/react';
-import { r as reactExports } from '../../../_virtual/index.js';
+import { memo, useState } from 'react';
 import { ceil, isNonNullish } from 'remeda';
 import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
 import { useXYStore } from '../../../hooks/useXYFlow.js';
@@ -20,7 +18,7 @@ const ElementNotation = ({ value }) => {
     color = "primary",
     shape = "rectangle"
   } = value;
-  const [onlyKind, setOnlyKind] = reactExports.useState(null);
+  const [onlyKind, setOnlyKind] = useState(null);
   const diagram = useDiagram();
   const w = 300;
   const h = 200;
@@ -119,7 +117,7 @@ const selector = (s) => ({
   isVisible: true
   // isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough),
 });
-const NotationPanel = reactExports.memo(() => {
+const NotationPanel = memo(() => {
   const height = useXYStore((s) => s.height);
   const {
     id,
@@ -142,7 +140,7 @@ const NotationPanel = reactExports.memo(() => {
           translateX: "100%",
           opacity: 0.6
         },
-        className: clsx("react-flow__panel", container),
+        className: cx("react-flow__panel", container),
         children: /* @__PURE__ */ jsx(Tooltip, { label: "View has no notations", color: "orange", ...portalProps, children: /* @__PURE__ */ jsx(
           ThemeIcon,
           {
@@ -165,7 +163,7 @@ const NotationPanel = reactExports.memo(() => {
           translateX: "100%",
           opacity: 0.6
         },
-        className: clsx("react-flow__panel", container),
+        className: cx("react-flow__panel", container),
         children: /* @__PURE__ */ jsx(Tooltip, { label: "Show notation", color: "dark", fz: "xs", ...portalProps, children: /* @__PURE__ */ jsx(
           ActionIcon,
           {
@@ -193,7 +191,7 @@ const NotationPanel = reactExports.memo(() => {
           opacity: 0,
           scale: 0.25
         },
-        className: clsx("react-flow__panel", container),
+        className: cx("react-flow__panel", container),
         style: {
           transformOrigin: "bottom right"
         },

package/dist/likec4diagram/ui/search/ElementsColumn.js

@@ -4,9 +4,8 @@ import { cx } from '@likec4/styles/css';
 import { useTree, Tree, ActionIcon, UnstyledButton, Box, Group, Highlight, Tooltip, Text } from '@mantine/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { IconChevronRight } from '@tabler/icons-react';
-import clsx from 'clsx';
 import * as m from 'motion/react-m';
-import { r as reactExports } from '../../../_virtual/index.js';
+import { useMemo, useCallback, useEffect } from 'react';
 import { isEmpty, pipe, reduce, only, partition, first } from 'remeda';
 import { IconOrShapeRenderer } from '../../../context/IconRenderer.js';
 import { sortByLabel } from '../../../likec4model/useLikeC4ElementsTree.js';
@@ -21,7 +20,7 @@ const btn = buttonsva();
 function ElementsColumn() {
   const search = useNormalizedSearch();
   const model = useLikeC4Model(true);
-  const data = reactExports.useMemo(() => {
+  const data = useMemo(() => {
     const searchTerms = search.split(".");
     let elements;
     if (isEmpty(search) || search === "kind:") {
@@ -92,7 +91,7 @@ function ElementsTree({
     multiple: false
   });
   tree.setHoveredNode = setHoveredNode;
-  reactExports.useEffect(() => {
+  useEffect(() => {
     tree.collapseAllNodes();
     for (const nd of all) {
       if (nd.children.length > 0) {
@@ -178,7 +177,7 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
         variant: "transparent",
         size: 16,
         tabIndex: -1,
-        className: clsx(elementExpandIcon),
+        className: cx(elementExpandIcon),
         style: {
           visibility: hasChildren ? "visible" : "hidden"
         },
@@ -201,7 +200,7 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
         component: m.button,
         layout: true,
         tabIndex: -1,
-        className: clsx(btn.root, "group", "likec4-element-button"),
+        className: cx(btn.root, "group", "likec4-element-button"),
         ...views.length > 0 && {
           onClick: (e) => {
             if (!hasChildren || expanded) {
@@ -239,7 +238,7 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
 }
 function useHandleElementSelection() {
   const navigateTo = useCloseSearchAndNavigateTo();
-  return reactExports.useCallback((element) => {
+  return useCallback((element) => {
     const views = [...element.views()];
     if (views.length === 0) {
       return;

package/dist/likec4diagram/ui/search/LikeC4Search.js

@@ -5,7 +5,7 @@ import { Portal, Group, ActionIcon, Grid, GridCol, Title, ScrollArea, ScrollArea
 import { useDisclosure, useHotkeys, useCallbackRef, useWindowEvent, useFocusTrap, useFocusReturn } from '@mantine/hooks';
 import { IconX } from '@tabler/icons-react';
 import { AnimatePresence, m, LayoutGroup } from 'motion/react';
-import { r as reactExports } from '../../../_virtual/index.js';
+import { memo, useRef } from 'react';
 import { SearchControl } from '../../../components/SearchControl.js';
 import { ElementsColumn } from './ElementsColumn.js';
 import { backdrop, root, scrollArea, pickviewBackdrop, pickview, pickviewGroup } from './LikeC4Search.css.js';
@@ -15,7 +15,7 @@ import { stopAndPrevent } from './utils.js';
 import { ViewsColumn, ViewButton } from './ViewsColum.js';
 import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
 
-const LikeC4Search = reactExports.memo(() => {
+const LikeC4Search = memo(() => {
   const [searchOpened, searchOps] = useDisclosure(false);
   useHotkeys([
     ["mod+k", () => searchOps.toggle(), {
@@ -25,7 +25,7 @@ const LikeC4Search = reactExports.memo(() => {
       preventDefault: true
     }]
   ]);
-  const afterCloseCbRef = reactExports.useRef(null);
+  const afterCloseCbRef = useRef(null);
   const close = useCallbackRef((cb) => {
     afterCloseCbRef.current = cb ?? null;
     searchOps.close();

package/dist/likec4diagram/ui/search/SearchInput.js

@@ -4,7 +4,6 @@ import { useCombobox, ComboboxOption, Text, Combobox, ComboboxTarget, Input, rem
 import { useFocusWithin, useIsFirstRender, useDebouncedValue, useWindowEvent } from '@mantine/hooks';
 import { usePreviousDistinct } from '@react-hookz/web';
 import { IconSearch } from '@tabler/icons-react';
-import '../../../_virtual/index.js';
 import { isString, keys, only } from 'remeda';
 import { useLikeC4Model } from '../../../likec4model/useLikeC4Model.js';
 import { input } from './LikeC4Search.css.js';

package/dist/likec4diagram/ui/search/_shared.css.d.ts

@@ -1,4 +1,4 @@
 import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '@likec4/styles/types';
 export declare const focusable = "likec4-focusable";
 export declare const emptyBoX: string;
-export declare const buttonsva: SlotRecipeRuntimeFn<"title" | "description" | "icon" | "root" | "descriptionColor", SlotRecipeVariantRecord<"title" | "description" | "icon" | "root" | "descriptionColor">>;
+export declare const buttonsva: SlotRecipeRuntimeFn<"root" | "title" | "description" | "icon" | "descriptionColor", SlotRecipeVariantRecord<"root" | "title" | "description" | "icon" | "descriptionColor">>;

package/dist/likec4diagram/ui/search/state.js

@@ -1,9 +1,8 @@
 import { DiagramNode } from '@likec4/core';
 import { createSafeContext } from '@mantine/core';
-import '@mantine/hooks';
 import { useStore } from '@nanostores/react';
 import { computed, atom, onMount } from 'nanostores';
-import { r as reactExports } from '../../../_virtual/index.js';
+import { useDeferredValue, useCallback } from 'react';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 
 const $search = atom("");
@@ -18,7 +17,7 @@ const $normalizedSearch = computed($search, (search) => {
   return v.length > 1 ? v : "";
 });
 function useNormalizedSearch() {
-  return reactExports.useDeferredValue(useStore($normalizedSearch));
+  return useDeferredValue(useStore($normalizedSearch));
 }
 const [LikeC4SearchContext, useCloseSearch] = createSafeContext("LikeC4Search");
 const $pickView = atom(null);
@@ -45,7 +44,7 @@ function useIsPickViewActive() {
 function useCloseSearchAndNavigateTo() {
   const diagram = useDiagram();
   const close = useCloseSearch();
-  return reactExports.useCallback((viewId, fromElementFqn) => {
+  return useCallback((viewId, fromElementFqn) => {
     close(() => {
       fromElementFqn ??= $pickView.get()?.elementFqn;
       setPickView(null);

package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx } from '@likec4/styles/css';
 import { Box, Button, Badge, ButtonGroup } from '@mantine/core';
 import { IconPlayerPlayFilled, IconPlayerSkipBackFilled, IconPlayerStopFilled, IconPlayerSkipForwardFilled } from '@tabler/icons-react';
-import clsx from 'clsx';
 import { AnimatePresence, m } from 'motion/react';
 import { isTruthy, isNonNull } from 'remeda';
 import { useDiagramContext, useDiagram } from '../../../hooks/useDiagram.js';
@@ -36,14 +36,14 @@ function DynamicViewWalkthrough() {
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
-        className: clsx("react-flow__panel", parallelStateFrame)
+        className: cx("react-flow__panel", parallelStateFrame)
       },
       "parallel-frame"
     ),
     /* @__PURE__ */ jsxs(
       Box,
       {
-        className: clsx("react-flow__panel", container),
+        className: cx("react-flow__panel", container),
         onClick: (e) => e.stopPropagation(),
         onDoubleClick: (e) => e.stopPropagation(),
         children: [
@@ -51,7 +51,7 @@ function DynamicViewWalkthrough() {
             Button,
             {
               ...buttonProps,
-              className: clsx(buttons, btn),
+              className: cx(buttons, btn),
               rightSection: /* @__PURE__ */ jsx(IconPlayerPlayFilled, {}),
               onClick: () => diagram.startWalkthrough(),
               px: "xl",

package/dist/likec4diagram/useLayoutConstraints.js

@@ -1,7 +1,6 @@
 import { nonNullable } from '@likec4/core';
-import '@xyflow/react';
 import { getNodeDimensions } from '@xyflow/system';
-import { r as reactExports } from '../_virtual/index.js';
+import { useRef, useMemo } from 'react';
 import { pipe, filter, hasAtLeast, map } from 'remeda';
 import { useDiagram } from '../hooks/useDiagram.js';
 import { useXYStoreApi } from '../hooks/useXYFlow.js';
@@ -186,8 +185,8 @@ function createLayoutConstraints(xyflowApi, editingNodeIds) {
 function useLayoutConstraints() {
   const xystore = useXYStoreApi();
   const diagram = useDiagram();
-  const solverRef = reactExports.useRef(void 0);
-  return reactExports.useMemo(() => {
+  const solverRef = useRef(void 0);
+  return useMemo(() => {
     let wasPending = false;
     const initial = { x: 0, y: 0 };
     let moved = false;

package/dist/likec4diagram/useViewToNodesEdges.js

@@ -71,6 +71,7 @@ function viewToNodesEdge(opts) {
       }
     };
     const compoundData = {
+      viewId: view.id,
       id: node.id,
       title: node.title,
       color: node.color,
@@ -81,6 +82,7 @@ function viewToNodesEdge(opts) {
       position: node.position
     };
     const leafNodeData = {
+      viewId: view.id,
       id: node.id,
       title: node.title,
       technology: node.technology,

package/dist/likec4model/LikeC4ModelContext.d.ts

@@ -1,3 +1,3 @@
-import { LikeC4Model } from '@likec4/core';
+import { AnyAux, LikeC4Model } from '@likec4/core/model';
 import { Context } from 'react';
-export declare const LikeC4ModelContext: Context<LikeC4Model<LikeC4Model.Any> | null>;
+export declare const LikeC4ModelContext: Context<LikeC4Model<AnyAux> | null>;

package/dist/likec4model/LikeC4ModelContext.js

@@ -1,5 +1,5 @@
-import { r as reactExports } from '../_virtual/index.js';
+import { createContext } from 'react';
 
-const LikeC4ModelContext = reactExports.createContext(null);
+const LikeC4ModelContext = createContext(null);
 
 export { LikeC4ModelContext };

package/dist/likec4model/useLikeC4ElementsTree.d.ts

@@ -1,4 +1,4 @@
-import { Fqn, ViewId } from '@likec4/core';
+import { Fqn, ViewId } from '@likec4/core/types';
 interface LikeC4ModelTreeNodeData {
     label: string;
     value: Fqn;

package/dist/likec4model/useLikeC4ElementsTree.js

@@ -1,5 +1,5 @@
-import { compareNatural } from '@likec4/core';
-import { r as reactExports } from '../_virtual/index.js';
+import { compareNatural } from '@likec4/core/utils';
+import { useMemo } from 'react';
 import { useLikeC4Model } from './useLikeC4Model.js';
 
 const sortByLabel = (a, b) => compareNatural(a.label, b.label);
@@ -12,7 +12,7 @@ function buildNode(element) {
 }
 function useLikeC4ElementsTree(viewId) {
   const model = useLikeC4Model(true);
-  return reactExports.useMemo(() => {
+  return useMemo(() => {
     if (viewId) {
       const view = model.view(viewId);
       return [...view.roots()].map(buildNode).sort(sortByLabel);

package/dist/likec4model/useLikeC4Model.d.ts

@@ -1,4 +1,4 @@
-import { LikeC4Model } from '@likec4/core';
+import { LikeC4Model } from '@likec4/core/model';
 export declare function useLikeC4Model(): LikeC4Model | null;
 export declare function useLikeC4Model(strict: true): LikeC4Model;
 export declare function useLikeC4Model(strict: boolean): LikeC4Model | null;

package/dist/likec4model/useLikeC4Model.js

@@ -1,9 +1,9 @@
-import { r as reactExports } from '../_virtual/index.js';
+import { useContext } from 'react';
 import { isString, isNonNullish, isDefined } from 'remeda';
 import { LikeC4ModelContext } from './LikeC4ModelContext.js';
 
 function useLikeC4Model(strict, type) {
-  const model = reactExports.useContext(LikeC4ModelContext);
+  const model = useContext(LikeC4ModelContext);
   if (isString(type) && isNonNullish(model) && model.type !== type) {
     throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.type}" in context`);
   }

package/dist/overlays/Overlays.d.ts

@@ -1,5 +1,4 @@
 import { OverlaysActorRef } from './overlaysActor';
-import { MemoExoticComponent } from 'react';
-export declare const Overlays: MemoExoticComponent<({ overlaysActorRef }: {
+export declare function Overlays({ overlaysActorRef }: {
     overlaysActorRef: OverlaysActorRef;
-}) => import("react/jsx-runtime").JSX.Element>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/overlays/Overlays.js

@@ -5,7 +5,7 @@ import { IconX } from '@tabler/icons-react';
 import { useSelector } from '@xstate/react';
 import { animate } from 'motion';
 import { useReducedMotionConfig, LayoutGroup, AnimatePresence } from 'motion/react';
-import { r as reactExports } from '../_virtual/index.js';
+import { useMemo, useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { isNonNullish } from 'remeda';
 import { ElementDetails } from './element-details/ElementDetails.js';
@@ -65,15 +65,15 @@ const compareSelectOverlays = (a, b) => {
     return overlay.actorRef === b[i].actorRef;
   });
 };
-const Overlays = reactExports.memo(({ overlaysActorRef }) => {
+function Overlays({ overlaysActorRef }) {
   const xyflowDomNode = useXYStore((s) => s.domNode);
-  const xyflowRendererDom = reactExports.useMemo(() => xyflowDomNode?.querySelector(".react-flow__renderer") ?? null, [
+  const xyflowRendererDom = useMemo(() => xyflowDomNode?.querySelector(".react-flow__renderer") ?? null, [
     xyflowDomNode
   ]);
   const overlays = useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays);
   const isMotionReduced = useReducedMotionConfig() ?? false;
   const isActiveOverlay = overlays.length > 0;
-  reactExports.useEffect(() => {
+  useEffect(() => {
     if (!xyflowRendererDom || isMotionReduced) return;
     animate(xyflowRendererDom, {
       opacity: isActiveOverlay ? 0.7 : 1,
@@ -122,7 +122,6 @@ const Overlays = reactExports.memo(({ overlaysActorRef }) => {
     }
   });
   return /* @__PURE__ */ jsx(DiagramFeatures.Overlays, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: Fallback, onReset: () => overlaysActorRef.send({ type: "close.all" }), children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: overlaysReact }) }) }) });
-});
-Overlays.displayName = "Overlays";
+}
 
 export { Overlays };

package/dist/overlays/element-details/ElementDetailsCard.css.js

@@ -26,16 +26,20 @@ const card = css({
   pointerEvents: "all",
   gap: "lg",
   justifyContent: "stretch",
-  backgroundColor: "mantine.colors.body",
-  backgroundImage: `linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)`,
-  borderTopColor: "likec4.palette.fill",
-  _dark: {
-    backgroundColor: `mantine.colors.dark[6]`,
-    backgroundImage: `
-          linear-gradient(180deg, color-mix(in srgb, {colors.likec4.palette.fill} 15%, transparent), transparent 80px),
-          linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)
-        `
+  backgroundColor: {
+    base: "mantine.colors.body",
+    _dark: "mantine.colors.dark[6]"
   },
+  border: `none`,
+  backgroundImage: `
+    linear-gradient(180deg,
+      color-mix(in srgb, {colors.likec4.palette.fill} 60%, transparent),
+      color-mix(in srgb, {colors.likec4.palette.fill} 20%, transparent) 8px,
+      color-mix(in srgb, {colors.likec4.palette.fill} 14%, transparent) 20px,
+      transparent 80px
+    ),
+    linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)
+  `,
   "& .react-flow__attribution": {
     display: "none"
   }