@likec4/diagram 1.48.0 → 1.50.0

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.4/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/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.4/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.4/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';
@@ -111,7 +111,7 @@ const ViewDetailsCardTrigger = ({ linksCount, onOpen }) => /* @__PURE__ */ jsx(P
 const SectionHeader = styled("div", {
   base: {
     fontSize: "xs",
-    color: "mantine.colors.dimmed",
+    color: "text.dimmed",
     fontWeight: "medium",
     userSelect: "none",
     mb: "xxs"
@@ -241,7 +241,7 @@ const ViewBadge = ({
 };
 const ViewBadgeLabel = styled("div", {
   base: {
-    color: "mantine.colors.dimmed",
+    color: "text.dimmed",
     fontWeight: "medium",
     fontSize: "xxs",
     userSelect: "none"

package/dist/navigationpanel/controls/LayoutWarning.js

@@ -8,7 +8,7 @@ import * as m from 'motion/react-m';
 import { memo, Fragment as Fragment$1 } from 'react';
 import { useDiagramCompareLayout } from '../../hooks/useDiagramCompareLayout.js';
 import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
-import IconAlertTriangle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
+import IconAlertTriangle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
 
 const LayoutWarning = memo(() => {
   const [ctx, { toggleCompare }] = useDiagramCompareLayout();

package/dist/navigationpanel/controls/LogoButton.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { cx, css } from '@likec4/styles/css';
+import { css, cx } from '@likec4/styles/css';
 import { hstack } from '@likec4/styles/patterns';
 import { UnstyledButton } from '@mantine/core';
 import * as m from 'motion/react-m';

package/dist/navigationpanel/controls/NavigationButtons.js

@@ -4,8 +4,8 @@ import * as m from 'motion/react-m';
 import { useDiagramContext } from '../../hooks/useDiagram.js';
 import { PanelActionIcon } from '../_common.js';
 import { useDiagram } from '../../hooks/safeContext.js';
-import IconArrowLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowLeft.js';
-import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
+import IconArrowLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowLeft.js';
+import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
 
 const NavigationButtons = () => {
   const diagram = useDiagram();

package/dist/navigationpanel/controls/OpenSource.js

@@ -3,7 +3,7 @@ import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
 import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
 import { useCurrentViewId } from '../../hooks/useCurrentView.js';
 import { Tooltip, PanelActionIcon } from '../_common.js';
-import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
 
 const OpenSource = () => {
   const viewId = useCurrentViewId();

package/dist/navigationpanel/controls/SearchControl.js

@@ -9,7 +9,7 @@ import '@xstate/react';
 import 'fast-equals';
 import 'react';
 import { useDiagram } from '../../hooks/safeContext.js';
-import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.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';
 
 function SearchControl() {
   const diagram = useDiagram();

package/dist/navigationpanel/controls/ToggleReadonly.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { cx, css } from '@likec4/styles/css';
+import { css, cx } from '@likec4/styles/css';
 import { hstack } from '@likec4/styles/patterns';
 import { UnstyledButton } from '@mantine/core';
 import { AnimatePresence } from 'motion/react';
@@ -8,8 +8,8 @@ import { isTruthy } from 'remeda';
 import { useDiagramContext } from '../../hooks/useDiagram.js';
 import { deriveToggledFeatures } from '../../likec4diagram/state/machine.setup.js';
 import { useDiagram } from '../../hooks/safeContext.js';
-import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
-import IconLock from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
+import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
+import IconLock from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
 
 const selector = (ctx) => {
   const toggledFeatures = deriveToggledFeatures(ctx);

package/dist/navigationpanel/dropdown/ProjectsMenu.js

@@ -4,7 +4,7 @@ import { HStack, Box } from '@likec4/styles/jsx';
 import { Menu, MenuTarget, Button, MenuDropdown, MenuItem } from '@mantine/core';
 import { memo } from 'react';
 import { useLikeC4ProjectsContext, useLikeC4ProjectId } from '../../hooks/useLikeC4Project.js';
-import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/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';
 
 const ProjectsMenu = memo((_) => {
   const { projects, onProjectChange } = useLikeC4ProjectsContext();

package/dist/navigationpanel/editorpanel/CenterCamera.js

@@ -5,7 +5,7 @@ import 'react';
 import { useDiagram } from '../../hooks/safeContext.js';
 import { PanelActionIcon } from '../_common.js';
 import { Tooltip } from './_common.js';
-import IconFocusCentered from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js';
+import IconFocusCentered from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js';
 
 const CenterCamera = () => {
   const diagram = useDiagram();

package/dist/navigationpanel/editorpanel/ChangeAutoLayoutButton.js

@@ -8,7 +8,7 @@ import { PanelActionIcon } from '../_common.js';
 import { Tooltip } from './_common.js';
 import { autolayoutIndicator, autolayoutButton, spacingSliderBody, spacingSliderThumb } from './styles.js';
 import { useDiagram } from '../../hooks/safeContext.js';
-import IconLayoutDashboard from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.js';
+import IconLayoutDashboard from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.js';
 
 const selector = (state) => ({
   viewId: state.view.id,

package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.js

@@ -9,15 +9,15 @@ import { useDiagram } from '../../hooks/safeContext.js';
 import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
 import { PanelActionIcon } from '../_common.js';
 import { Tooltip } from './_common.js';
-import IconLayoutCollage from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js';
-import IconLayoutBoardSplit from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.js';
-import IconLayoutAlignLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.js';
-import IconLayoutAlignCenter from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.js';
-import IconLayoutAlignRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.js';
-import IconLayoutAlignTop from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.js';
-import IconLayoutAlignMiddle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.js';
-import IconLayoutAlignBottom from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.js';
-import IconRouteOff from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js';
+import IconLayoutCollage from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js';
+import IconLayoutBoardSplit from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.js';
+import IconLayoutAlignLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.js';
+import IconLayoutAlignCenter from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.js';
+import IconLayoutAlignRight from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.js';
+import IconLayoutAlignTop from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.js';
+import IconLayoutAlignMiddle from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.js';
+import IconLayoutAlignBottom from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.js';
+import IconRouteOff from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js';
 
 const Action = ({
   label,

package/dist/navigationpanel/editorpanel/ToggleReadonly.js

@@ -5,7 +5,7 @@ import 'react';
 import { useDiagram } from '../../hooks/safeContext.js';
 import { PanelActionIcon } from '../_common.js';
 import { Tooltip } from './_common.js';
-import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
+import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.36.1_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
 
 const ToggleReadonly = () => {
   const diagram = useDiagram();