@likec4/diagram 1.47.0 → 1.49.0

package/dist/navigationpanel/NavigationPanelDropdown.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { VIEW_FOLDERS_SEPARATOR, normalizeViewPath } from '@likec4/core/model';
 import { ifilter, ifirst, toArray, compareNaturalHierarchically, nonexhaustive } from '@likec4/core/utils';
-import { cx, css } from '@likec4/styles/css';
+import { css, cx } from '@likec4/styles/css';
 import { HStack, VStack, Box } from '@likec4/styles/jsx';
 import { vstack, hstack } from '@likec4/styles/patterns';
-import { PopoverDropdown, ScrollAreaAutosize, Input, createScopedKeydownHandler, rem, Button, Divider, Highlight, UnstyledButton, Breadcrumbs } from '@mantine/core';
+import { PopoverDropdown, ScrollAreaAutosize, Input, Button, rem, Divider, createScopedKeydownHandler, Highlight, UnstyledButton, Breadcrumbs } from '@mantine/core';
 import { useThrottledCallback, useUncontrolled } from '@mantine/hooks';
 import { useMountEffect } from '@react-hookz/web';
 import { useSelector } from '@xstate/react';
@@ -12,18 +12,18 @@ import { shallowEqual, deepEqual } from 'fast-equals';
 import { memo, useDeferredValue, useState, useEffect, useRef } from 'react';
 import { isEmpty, pipe, sort, isArray } from 'remeda';
 import { NavigationLink } from '../components/NavigationLink.js';
+import { useOnDiagramEvent } from '../hooks/useDiagram.js';
 import { useLikeC4Model } from '../hooks/useLikeC4Model.js';
 import { ProjectsMenu } from './dropdown/ProjectsMenu.js';
 import { useNavigationActor, useNavigationActorSnapshot, useNavigationActorContext, useNavigationActorRef } from './hooks.js';
 import { breadcrumbTitle } from './styles.css.js';
-import { useOnDiagramEvent } from '../hooks/useDiagram.js';
-import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
-import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
-import IconDirectionSignFilled from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.js';
-import IconStack2 from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
-import IconZoomScan from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconStarFilled from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.js';
-import IconFolderFilled from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.js';
+import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+import IconDirectionSignFilled from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.js';
+import IconStack2 from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
+import IconZoomScan from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconStarFilled from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.js';
+import IconFolderFilled from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.js';
+import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const scopedKeydownHandler = createScopedKeydownHandler({
   siblingSelector: "[data-likec4-focusable]",
@@ -240,7 +240,7 @@ function FoundedView({ view, highlight, ...props }) {
       className: cx(
         css({
           _groupHover: {
-            color: "mantine.colors.dimmed"
+            color: "text.dimmed"
           }
         }),
         inheritColor,
@@ -265,7 +265,7 @@ function FoundedView({ view, highlight, ...props }) {
       className,
       children: [
         folderIcon,
-        /* @__PURE__ */ jsx(Breadcrumbs, { separator: /* @__PURE__ */ jsx(IconChevronRight, { size: 12, stroke: 1.5 }), separatorMargin: 3, children: breadcrumbs })
+        /* @__PURE__ */ jsx(Breadcrumbs, { separator: btnRightSection, separatorMargin: 3, children: breadcrumbs })
       ]
     }
   );
@@ -468,7 +468,7 @@ function SearchInput(props) {
         }),
         input: css({
           _placeholder: {
-            color: "mantine.colors.dimmed"
+            color: "text.dimmed"
           },
           _focus: {
             outline: "none"

package/dist/navigationpanel/_common.d.ts

@@ -1,4 +1,4 @@
-import { NavigationPanelActionIconVariant } from '../../styled-system/recipes';
+import { NavigationPanelActionIconVariant } from '@likec4/styles/recipes';
 import { ActionIconProps, TooltipProps, BreadcrumbsProps } from '@mantine/core';
 import { HTMLMotionProps } from 'motion/react';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';

package/dist/navigationpanel/_common.js

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { cx, css } from '@likec4/styles/css';
 import { navigationPanelActionIcon } from '@likec4/styles/recipes';
-import { ActionIcon, ThemeIcon, Tooltip as Tooltip$1, Breadcrumbs } from '@mantine/core';
+import { Tooltip as Tooltip$1, ActionIcon, ThemeIcon, Breadcrumbs } from '@mantine/core';
 import * as m from 'motion/react-m';
 import { forwardRef } from 'react';
-import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
+import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",
@@ -19,7 +19,6 @@ const Tooltip = Tooltip$1.withProps({
 const BreadcrumbsSeparator = () => /* @__PURE__ */ jsx(
   ThemeIcon,
   {
-    component: m.div,
     variant: "transparent",
     size: 16,
     className: css({

package/dist/navigationpanel/actor.js

@@ -1,5 +1,5 @@
 import { isEmpty } from 'remeda';
-import { setup, emit, assign, assertEvent, raise } from 'xstate';
+import { setup, emit, assertEvent, assign, raise } from 'xstate';
 
 const _actorLogic = setup({
   types: {

package/dist/navigationpanel/comparepanel/CompareActionsMenu.js

@@ -3,9 +3,9 @@ import { cx } from '@likec4/styles/css';
 import { Box } from '@likec4/styles/jsx';
 import { hstack } from '@likec4/styles/patterns';
 import { Menu, UnstyledButton, Tooltip } from '@mantine/core';
-import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
+import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
 import { stopPropagation } from '../../utils/xyflow.js';
-import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
+import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
 
 function CompareActionsMenu({
   disabled = false,

package/dist/navigationpanel/comparepanel/ComparePanel.js

@@ -1,41 +1,167 @@
-import { jsx } from 'react/jsx-runtime';
-import { hstack } from '@likec4/styles/patterns';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { css } from '@likec4/styles/css';
+import { HStack } from '@likec4/styles/jsx';
+import { hstack, vstack } from '@likec4/styles/patterns';
+import { Divider, Button } from '@mantine/core';
+import { useIsMounted } from '@react-hookz/web';
 import { AnimatePresence } from 'motion/react';
 import * as m from 'motion/react-m';
-import { memo } from 'react';
+import { memo, useState } from 'react';
+import { useDiagramCompareLayout } from '../../hooks/useDiagramCompareLayout.js';
+import { Tooltip } from '../_common.js';
 import { ComparePanelControls } from './ComparePanelControls.js';
+import { DriftsSummary } from './DriftsSummary.js';
+import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
 import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
+import { useCallbackRef } from '../../hooks/useCallbackRef.js';
 
+const variants = {
+  initial: {
+    opacity: 0,
+    translateX: -20
+  },
+  animate: {
+    opacity: 1,
+    translateX: 0
+  },
+  exit: {
+    opacity: 0,
+    translateX: -20
+  }
+};
 const ComparePanel = memo(() => {
+  const portalProps = useMantinePortalProps();
+  const isMounted = useIsMounted();
   const { enableCompareWithLatest } = useEnabledFeatures();
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: enableCompareWithLatest && /* @__PURE__ */ jsx(
-    m.div,
-    {
-      layout: "position",
-      className: hstack({
-        gap: "2",
-        layerStyle: "likec4.panel",
-        position: "relative",
-        px: "2",
-        py: "1",
-        pl: "3",
-        pointerEvents: "all"
-      }),
-      initial: {
-        opacity: 0,
-        translateX: -20
-      },
-      animate: {
-        opacity: 1,
-        translateX: 0
+  const [ctx, ops] = useDiagramCompareLayout();
+  const [isProcessing, setIsProcessing] = useState(false);
+  const resetProcessing = () => {
+    setTimeout(() => {
+      if (isMounted()) {
+        setIsProcessing(false);
+      }
+    }, 500);
+  };
+  const onApplyLatest = useCallbackRef((e) => {
+    if (!ctx.canApplyLatest || ctx.layout === "auto") {
+      window.alert(
+        "Cannot apply changes from latest version when using auto layout. Please switch to manual layout first."
+      );
+      return;
+    }
+    e.stopPropagation();
+    setIsProcessing(true);
+    setTimeout(() => {
+      ops.applyLatestToManual();
+      resetProcessing();
+    }, 200);
+  });
+  const onResetManualLayout = useCallbackRef((e) => {
+    e.stopPropagation();
+    setIsProcessing(true);
+    setTimeout(() => {
+      ops.resetManualLayout();
+      resetProcessing();
+    }, 200);
+  });
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: enableCompareWithLatest && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      m.div,
+      {
+        layout: "size",
+        layoutDependency: ctx.drifts || ctx.layout,
+        className: hstack({
+          gap: "2",
+          layerStyle: "likec4.panel",
+          position: "relative",
+          px: "2",
+          py: "1",
+          pl: "3",
+          pointerEvents: "all"
+        }),
+        variants,
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        children: /* @__PURE__ */ jsx(ComparePanelControls, {})
       },
-      exit: {
-        opacity: 0,
-        translateX: -20
+      "ComparePanel"
+    ),
+    /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        layout: "size",
+        layoutDependency: ctx.drifts || ctx.layout,
+        variants,
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        className: vstack({
+          gap: "4",
+          layerStyle: "likec4.panel",
+          position: "relative",
+          p: "4",
+          pointerEvents: "all",
+          height: "auto",
+          overflow: "hidden",
+          maxHeight: "calc(100cqh - 180px)",
+          "@/md": {
+            minWidth: "200px"
+          }
+        }),
+        children: [
+          /* @__PURE__ */ jsx(DriftsSummary, {}),
+          ctx.canApplyLatest && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(m.div, { layout: "position", className: css({ flex: "0" }), children: [
+            /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", size: "xs", mb: "xs" }),
+            /* @__PURE__ */ jsxs(HStack, { children: [
+              /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  openDelay: 100,
+                  disabled: ctx.layout !== "auto",
+                  label: "Switch to manual layout to apply changes.",
+                  ...portalProps,
+                  children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      loading: isProcessing,
+                      size: "xs",
+                      color: "orange",
+                      variant: "light",
+                      onClick: onApplyLatest,
+                      disabled: ctx.layout === "auto",
+                      children: "Apply changes"
+                    }
+                  )
+                }
+              ),
+              !isProcessing && /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  openDelay: 100,
+                  disabled: ctx.layout !== "manual",
+                  label: "Reset manual layout",
+                  ...portalProps,
+                  children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      hidden: isProcessing,
+                      size: "xs",
+                      color: "orange",
+                      variant: "subtle",
+                      onClick: onResetManualLayout,
+                      children: "Reset"
+                    }
+                  )
+                }
+              )
+            ] })
+          ] }) })
+        ]
       },
-      children: /* @__PURE__ */ jsx(ComparePanelControls, {})
-    }
-  ) });
+      "ListOfDrifts"
+    )
+  ] }) });
 });
 ComparePanel.displayName = "ComparePanel";
 

package/dist/navigationpanel/comparepanel/ComparePanelControls.js

@@ -5,7 +5,7 @@ import { useDiagramCompareLayout } from '../../hooks/useDiagramCompareLayout.js'
 import { PanelActionIcon } from '../_common.js';
 import { CompareActionsMenu } from './CompareActionsMenu.js';
 import { LayoutTypeSwitcher } from './LayoutTypeSwitcher.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 const Divider = Divider$1.withProps({
   mx: 2,

package/dist/navigationpanel/comparepanel/DriftsSummary.d.ts

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

package/dist/navigationpanel/comparepanel/DriftsSummary.js

@@ -0,0 +1,264 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { deepEqual } from 'fast-equals';
+import { styled, Txt } from '@likec4/styles/jsx';
+import { vstack } from '@likec4/styles/patterns';
+import { useDebouncedCallback } from '@mantine/hooks';
+import { AnimatePresence, m, stagger } from 'motion/react';
+import { hasAtLeast, map, pipe, filter } from 'remeda';
+import { useDiagramSnapshot, selectDiagramActorContext } from '../../hooks/useDiagram.js';
+import { useDiagram } from '../../hooks/safeContext.js';
+import { useCallbackRef } from '../../hooks/useCallbackRef.js';
+
+const hasDrifts = (item) => {
+  return !!item.drifts && hasAtLeast(item.drifts, 1);
+};
+const selectDrifts = selectDiagramActorContext((ctx) => ({
+  view: ctx.view.drifts ?? [],
+  nodes: pipe(
+    ctx.view.nodes,
+    map((node) => ({
+      id: node.id,
+      name: node.title,
+      drifts: node.drifts
+    })),
+    filter(hasDrifts)
+  ),
+  edges: pipe(
+    ctx.view.edges,
+    map((edge) => ({
+      edgeId: edge.id,
+      drifts: edge.drifts
+    })),
+    filter(hasDrifts)
+  )
+}));
+const variants = {
+  initial: {
+    opacity: 0,
+    translateY: -8
+  },
+  animate: {
+    opacity: 1,
+    translateY: 0,
+    transition: {
+      delayChildren: stagger(0.1)
+    }
+  },
+  exit: {
+    opacity: 0,
+    translateY: -8,
+    transition: {
+      delayChildren: stagger(0.2, { startDelay: 0.5, from: "last" })
+    }
+  }
+};
+function DriftsSummary() {
+  const selected = useDiagramSnapshot(selectDrifts, deepEqual);
+  const diagram = useDiagram();
+  const onMouseLeaveDebounced = useDebouncedCallback(
+    (e) => {
+      e.stopPropagation();
+      diagram.unhighlightAll();
+    },
+    150
+  );
+  const onMouseEnter = useCallbackRef((e) => {
+    const target = e.currentTarget.getAttribute("data-drift-type");
+    const id = e.currentTarget.getAttribute("data-drift-id");
+    if (target === "node" && id) {
+      e.stopPropagation();
+      onMouseLeaveDebounced.cancel();
+      diagram.highlightNode(id);
+      return;
+    }
+    if (target === "edge" && id) {
+      e.stopPropagation();
+      onMouseLeaveDebounced.cancel();
+      diagram.highlightEdge(id);
+      return;
+    }
+  });
+  const onClick = useCallbackRef((e) => {
+    const target = e.currentTarget.getAttribute("data-drift-type");
+    const id = e.currentTarget.getAttribute("data-drift-id");
+    if (target === "node" && id) {
+      e.stopPropagation();
+      diagram.centerViewportOnNode(id);
+      return;
+    }
+    if (target === "edge" && id) {
+      e.stopPropagation();
+      diagram.centerViewportOnEdge(id);
+      return;
+    }
+  });
+  const handlers = {
+    onMouseEnter,
+    onMouseLeave: onMouseLeaveDebounced,
+    onClick
+  };
+  const { view, nodes, edges } = selected;
+  if (view.length === 0 && nodes.length === 0 && edges.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(AnimatePresence, { propagate: true, mode: "wait", children: /* @__PURE__ */ jsxs(
+    m.div,
+    {
+      layout: "size",
+      variants,
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      layoutDependency: selected,
+      className: vstack({
+        mx: "[calc({spacing.2} * -1)]",
+        px: "2",
+        flex: "1",
+        height: "100%",
+        overflow: "scroll",
+        gap: "4"
+      }),
+      children: [
+        hasAtLeast(view, 1) && /* @__PURE__ */ jsx(ViewDrifts, { drifts: view }),
+        nodes.length > 0 && /* @__PURE__ */ jsxs(m.div, { layout: "size", children: [
+          /* @__PURE__ */ jsx(SectionHeader, { children: "Elements:" }),
+          /* @__PURE__ */ jsx(m.div, { layout: "size", className: vstack({ mt: "2", gap: "2" }), children: map(
+            nodes,
+            (node) => /* @__PURE__ */ jsx(NodeDrifts, { ...node, ...handlers }, node.id)
+          ) })
+        ] }, `nodes-drifts`),
+        edges.length > 0 && /* @__PURE__ */ jsxs(m.div, { layout: "size", children: [
+          /* @__PURE__ */ jsx(SectionHeader, { children: "Relationships:" }),
+          /* @__PURE__ */ jsx(m.div, { layout: "size", className: vstack({ mt: "2", gap: "2" }), children: map(edges, (edge) => /* @__PURE__ */ jsx(EdgeDrifts, { ...edge, ...handlers }, edge.edgeId)) })
+        ] }, `edges-drifts`)
+      ]
+    },
+    `drifts-summary`
+  ) });
+}
+function ViewDrifts({ drifts }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    m.div,
+    {
+      layout: "position",
+      className: vstack({
+        gap: "2"
+      }),
+      children: [
+        /* @__PURE__ */ jsx(SectionHeader, { children: "View drifts (summary):" }),
+        /* @__PURE__ */ jsx(DriftsGroup, { children: map(drifts, (drift) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, drift)) }, `view-drifts`)
+      ]
+    },
+    `view-drifts-header`
+  ) });
+}
+function NodeDrifts({ id, name, drifts, ...handlers }) {
+  return /* @__PURE__ */ jsxs(
+    DriftsGroup,
+    {
+      "data-drift-type": "node",
+      "data-drift-id": id,
+      ...handlers,
+      children: [
+        /* @__PURE__ */ jsx(
+          Txt,
+          {
+            truncate: true,
+            css: {
+              maxWidth: {
+                base: 160,
+                "@/sm": 180,
+                "@/md": 250
+              }
+            },
+            color: "likec4.compare.manual.outline",
+            fontSize: "xs",
+            lineHeight: "sm",
+            fontWeight: "medium",
+            children: name
+          }
+        ),
+        map(drifts, (drift) => /* @__PURE__ */ jsx(DriftLabel, { children: drift }, id + drift))
+      ]
+    },
+    `node-drifts-${id}`
+  );
+}
+function EdgeDrifts({ edgeId, drifts, ...handlers }) {
+  return /* @__PURE__ */ jsx(
+    DriftsGroup,
+    {
+      "data-drift-type": "edge",
+      "data-drift-id": edgeId,
+      ...handlers,
+      children: map(drifts, (drift) => /* @__PURE__ */ jsx(
+        DriftLabel,
+        {
+          children: drift
+        },
+        edgeId + drift
+      ))
+    },
+    `edge-drifts-${edgeId}`
+  );
+}
+const DriftsGroup = styled(m.div, {
+  base: vstack.raw({
+    gap: "1",
+    px: "3",
+    py: "2",
+    cursor: "default",
+    rounded: "sm",
+    backgroundColor: "likec4.compare.manual/10",
+    border: "1px solid {colors.likec4.compare.manual.outline/20}",
+    _hover: {
+      backgroundColor: "likec4.compare.manual/20",
+      borderColor: "likec4.compare.manual.outline/25"
+    }
+  })
+}, {
+  defaultProps: {
+    className: "group",
+    variants,
+    layout: "size",
+    initial: "initial",
+    animate: "animate",
+    exit: "exit"
+  }
+});
+const SectionHeader = styled(m.div, {
+  base: {
+    userSelect: "none",
+    fontWeight: "medium",
+    textStyle: "dimmed.xs",
+    pl: "2"
+  }
+}, {
+  defaultProps: {
+    variants,
+    layout: "position",
+    initial: "initial",
+    animate: "animate",
+    exit: "exit"
+  }
+});
+const DriftLabel = styled(m.div, {
+  base: {
+    userSelect: "none",
+    textStyle: "xs",
+    color: {
+      base: "text",
+      _groupHover: "text.bright"
+    }
+  }
+}, {
+  defaultProps: {
+    variants,
+    layout: "position",
+    initial: "initial",
+    animate: "animate",
+    exit: "exit"
+  }
+});
+
+export { DriftsSummary };

package/dist/navigationpanel/comparepanel/LayoutTypeSwitcher.js

@@ -3,16 +3,15 @@ import { invariant } from '@likec4/core';
 import { css } from '@likec4/styles/css';
 import { SegmentedControl } from '@mantine/core';
 import * as m from 'motion/react-m';
-import { useMemo } from 'react';
 
+const data = [
+  { value: "manual", label: "Saved manual" },
+  { value: "auto", label: "Latest auto" }
+];
 function LayoutTypeSwitcher({
   value,
   onChange
 }) {
-  const data = useMemo(() => [
-    { value: "manual", label: "Saved manual" },
-    { value: "auto", label: "Latest auto" }
-  ], []);
   return /* @__PURE__ */ jsx(m.div, { layout: "position", children: /* @__PURE__ */ jsx(
     SegmentedControl,
     {

package/dist/navigationpanel/controls/DetailsControls.js

@@ -12,8 +12,8 @@ import { Link } from '../../components/Link.js';
 import { useOnDiagramEvent } from '../../hooks/useDiagram.js';
 import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
 import { useNavigationActorSnapshot } from '../hooks.js';
-import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
-import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
+import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
+import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
 import { useDiagram } from '../../hooks/safeContext.js';
 import { ElementTag } from '../../base-primitives/element/ElementTags.js';
 import { Markdown } from '../../base-primitives/Markdown.js';
@@ -97,7 +97,7 @@ const ViewDetailsCardTrigger = ({ linksCount, onOpen }) => /* @__PURE__ */ jsx(P
           {
             css: {
               fontSize: "11px",
-              fontWeight: 600,
+              fontWeight: "bold",
               lineHeight: 1,
               opacity: 0.8
             },
@@ -111,8 +111,8 @@ const ViewDetailsCardTrigger = ({ linksCount, onOpen }) => /* @__PURE__ */ jsx(P
 const SectionHeader = styled("div", {
   base: {
     fontSize: "xs",
-    color: "mantine.colors.dimmed",
-    fontWeight: 500,
+    color: "text.dimmed",
+    fontWeight: "medium",
     userSelect: "none",
     mb: "xxs"
   }
@@ -241,8 +241,8 @@ const ViewBadge = ({
 };
 const ViewBadgeLabel = styled("div", {
   base: {
-    color: "mantine.colors.dimmed",
-    fontWeight: 500,
+    color: "text.dimmed",
+    fontWeight: "medium",
     fontSize: "xxs",
     userSelect: "none"
   }