@likec4/diagram 1.45.0 → 1.46.2

package/dist/hooks/useDiagram.js

@@ -3,6 +3,7 @@ import { shallowEqual } from 'fast-equals';
 import { useCallback, useRef, useEffect } from 'react';
 import { useDiagramActorRef } from './safeContext.js';
 export { useDiagram } from './safeContext.js';
+import { useCallbackRef } from './useCallbackRef.js';
 
 function useDiagramActorSnapshot(selector, compare = shallowEqual) {
   const actorRef = useDiagramActorRef();
@@ -10,21 +11,31 @@ function useDiagramActorSnapshot(selector, compare = shallowEqual) {
 }
 function useDiagramContext(selector, compare = shallowEqual, deps) {
   const actorRef = useDiagramActorRef();
-  const select = useCallback((s) => selector(s.context), deps ?? []);
+  const selectorRef = useCallbackRef(selector);
+  const select = useCallback((s) => selectorRef(s.context), deps ?? []);
   return useSelector(actorRef, select, compare);
 }
-function useOnDiagramEvent(event, callback) {
+function useOnDiagramEvent(event, callback, options) {
   const actorRef = useDiagramActorRef();
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
+  const callbackRef = useCallbackRef(callback);
+  const wasCalled = useRef(false);
+  const once = options?.once ?? false;
   useEffect(() => {
-    const subscription = actorRef.on(event, (payload) => {
-      callbackRef.current(payload);
+    if (once && wasCalled.current) {
+      return;
+    }
+    let subscription = actorRef.on(event, (payload) => {
+      callbackRef(payload);
+      wasCalled.current = true;
+      if (once) {
+        subscription?.unsubscribe();
+        subscription = null;
+      }
     });
     return () => {
-      subscription.unsubscribe();
+      subscription?.unsubscribe();
     };
-  }, [actorRef, event]);
+  }, [actorRef, event, once]);
 }
 
 export { useDiagramActorRef, useDiagramActorSnapshot, useDiagramContext, useOnDiagramEvent };

package/dist/hooks/useDiagramCompareLayout.d.ts

@@ -1,16 +1,20 @@
 import { DiagramActorSnapshot } from '../likec4diagram/state/types';
 import type * as t from '@likec4/core/types';
 declare const selectCompareLayoutState: ({ context }: DiagramActorSnapshot) => {
+    hasEditor: false;
     isEnabled: false;
     isEditable: false;
     isActive: false;
     drifts: never[];
+    canApplyLatest: boolean;
     layout: t.LayoutType;
 } | {
+    hasEditor: boolean;
     isEnabled: true;
     isEditable: boolean;
     isActive: boolean;
     drifts: t.NonEmptyReadonlyArray<t.LayoutedViewDriftReason>;
+    canApplyLatest: boolean;
     layout: t.LayoutType;
 };
 type DiagramCompareLayoutState = ReturnType<typeof selectCompareLayoutState>;
@@ -23,6 +27,10 @@ type DiagramCompareLayoutOps = {
      * Switches the layout type between 'auto' and 'manual'.
      */
     switchLayout: (layoutType: t.LayoutType) => void;
+    /**
+     * Merges the latest layout into the manual layout.
+     */
+    applyLatestToManual: () => void;
     /**
      * Resets the manual layout to its default state.
      */

package/dist/hooks/useDiagramCompareLayout.js

@@ -1,3 +1,4 @@
+import { nonNullable } from '@likec4/core';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
 import { deriveToggledFeatures } from '../likec4diagram/state/machine.setup.js';
@@ -6,12 +7,14 @@ import { useCallbackRef } from './useCallbackRef.js';
 
 const selectCompareLayoutState = ({ context }) => {
   const drifts = context.view.drifts ?? null;
-  if (!context.features.enableCompareWithLatest || !drifts) {
+  if (!context.features.enableCompareWithLatest || !drifts || drifts.length === 0) {
     return {
+      hasEditor: false,
       isEnabled: false,
       isEditable: false,
       isActive: false,
       drifts: [],
+      canApplyLatest: false,
       layout: context.view._layout ?? "auto"
     };
   }
@@ -20,10 +23,12 @@ const selectCompareLayoutState = ({ context }) => {
     enableReadOnly
   } = deriveToggledFeatures(context);
   return {
+    hasEditor: context.features.enableEditor,
     isEnabled: true,
     isEditable: !enableReadOnly,
     isActive: enableCompareWithLatest === true,
     drifts,
+    canApplyLatest: !drifts.includes("type-changed"),
     layout: context.view._layout ?? "auto"
   };
 };
@@ -59,7 +64,22 @@ function useDiagramCompareLayout() {
     }
     actorRef.send({ type: "layout.resetManualLayout" });
   });
-  return [state, { toggleCompare, switchLayout, resetManualLayout }];
+  const applyLatestToManual = useCallbackRef(() => {
+    if (!state.isEnabled) {
+      console.warn("Compare with latest feature is not enabled");
+      return;
+    }
+    const editor = nonNullable(actorRef.system?.get("editor"), "editor actor not found");
+    editor.send({ type: "applyLatestToManual" });
+    if (state.isActive) {
+      actorRef.send({
+        type: "toggle.feature",
+        feature: "CompareWithLatest",
+        forceValue: false
+      });
+    }
+  });
+  return [state, { toggleCompare, switchLayout, resetManualLayout, applyLatestToManual }];
 }
 
 export { useDiagramCompareLayout };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { IconRendererProvider } from './context/IconRenderer';
 export { LikeC4Diagram, type LikeC4DiagramProps, } from './LikeC4Diagram';
 export type { ElementIconRenderer, ElementIconRendererProps, LikeC4ColorScheme, NodeRenderers, OnCanvasClick, OnChange, OnEdgeClick, OnInitialized, OnNavigateTo, OnNodeClick, OnOpenSource, PaddingWithUnit, ViewPadding, WhereOperator, } from './LikeC4Diagram.props';
 export { LikeC4ModelProvider, type LikeC4ModelProviderProps, } from './LikeC4ModelProvider';
+export { type LikeC4EditorPort, LikeC4EditorProvider, type LikeC4EditorProviderProps, } from './editor/LikeC4EditorProvider';
 export { LikeC4ProjectsProvider, type LikeC4ProjectsProviderProps, } from './LikeC4ProjectsProvider';
 export { type DiagramApi, type DiagramContext, useDiagram, useDiagramContext, useOnDiagramEvent, } from './hooks/useDiagram';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel, } from './hooks/useLikeC4Model';

package/dist/index.js

@@ -1,6 +1,7 @@
 export { IconRendererProvider } from './context/IconRenderer.js';
 export { LikeC4Diagram } from './LikeC4Diagram.js';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider.js';
+export { LikeC4EditorProvider } from './editor/LikeC4EditorProvider.js';
 export { LikeC4ProjectsProvider } from './LikeC4ProjectsProvider.js';
 export { useDiagramContext, useOnDiagramEvent } from './hooks/useDiagram.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from './hooks/useLikeC4Model.js';

package/dist/likec4diagram/DiagramXYFlow.js

@@ -45,9 +45,8 @@ function prepareNodeTypes(nodeTypes) {
   };
 }
 const selectXYProps = ({ context: ctx, children }) => {
-  ctx.toggledFeatures;
   const { enableReadOnly } = deriveToggledFeatures(ctx);
-  const isNotEditingEdge = enableReadOnly || children.syncLayout?.getSnapshot().context.editing !== "edge";
+  const isNotEditingEdge = enableReadOnly || children.editor?.getSnapshot().context.editing !== "edge";
   return {
     enableReadOnly,
     initialized: ctx.initialized.xydata && ctx.initialized.xyflow,

package/dist/likec4diagram/custom/edges/EdgeDrifts.js

@@ -18,15 +18,11 @@ function EdgeDrifts({
           pointerEvents: "none",
           stroke: "likec4.compare.manual.outline",
           fill: "none",
-          mixBlendMode: "plus-lighter",
           strokeWidth: {
             base: "8px",
             _whenHovered: "12px"
           },
-          strokeOpacity: {
-            base: 0.3,
-            _whenHovered: 0.5
-          }
+          strokeOpacity: 0.5
         })
       ),
       d: svgPath,

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -1,8 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
+import { css, cx } from '@likec4/styles/css';
 import { EdgeLabelRenderer } from '@xyflow/react';
 import { useState, useRef, useEffect } from 'react';
-import { ZIndexes } from '../../../base/const.js';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
 import '@xstate/react';
@@ -12,7 +11,7 @@ import { useUpdateEffect } from '../../../hooks/useUpdateEffect.js';
 import { useXYFlow, useXYStoreApi } from '../../../hooks/useXYFlow.js';
 import { isSamePoint } from '../../../utils/xyflow.js';
 import { EdgeDrifts } from './EdgeDrifts.js';
-import { controlDragging, controlPointsContainer, controlPoint } from './edges.css.js';
+import { controlPointsContainer, controlPoint } from './edges.css.js';
 import { useControlPoints } from './useControlPoints.js';
 import { useRelationshipEdgePath } from './useRelationshipEdgePath.js';
 import { memoEdge } from '../../../base-primitives/memoEdge.js';
@@ -45,14 +44,12 @@ const RelationshipEdge = memoEdge((props) => {
     id,
     selected = false,
     data: {
-      hovered = false,
-      active = false,
       labelBBox,
       labelXY,
       ...data
     }
   } = props;
-  const navigateTo = enableNavigateTo ? data.navigateTo : void 0;
+  const navigateTo = enableNavigateTo && !isControlPointDragging ? data.navigateTo : void 0;
   const {
     controlPoints,
     setControlPoints,
@@ -127,7 +124,7 @@ const RelationshipEdge = memoEdge((props) => {
     if (e.pointerType !== "mouse") {
       return;
     }
-    if (e.button !== 2) {
+    if (e.button !== 2 && !selected) {
       return;
     }
     e.stopPropagation();
@@ -155,53 +152,65 @@ const RelationshipEdge = memoEdge((props) => {
     };
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(EdgeContainer, { ...props, className: cx(isControlPointDragging && controlDragging), children: [
-      /* @__PURE__ */ jsx(
-        EdgePath,
-        {
-          edgeProps: props,
-          svgPath: edgePath,
-          ref: svgPathRef,
-          isDragging: isControlPointDragging,
-          ...enabledEditing && {
-            onEdgePointerDown
+    /* @__PURE__ */ jsxs(
+      EdgeContainer,
+      {
+        ...props,
+        className: css({
+          "& .react-flow__edge-interaction": {
+            cursor: enabledEditing && selected ? "copy" : void 0
           }
-        }
-      ),
-      enableCompareWithLatest && /* @__PURE__ */ jsx(
-        EdgeDrifts,
-        {
-          edgeProps: props,
-          svgPath: edgePath
-        }
-      ),
-      labelBBox && /* @__PURE__ */ jsx(
-        EdgeLabelContainer,
-        {
-          edgeProps: props,
-          labelPosition: isControlPointDragging ? labelPos : { x: labelX, y: labelY },
-          children: /* @__PURE__ */ jsx(
-            EdgeLabel,
+        }),
+        children: [
+          /* @__PURE__ */ jsx(
+            EdgePath,
+            {
+              edgeProps: props,
+              svgPath: edgePath,
+              ref: svgPathRef,
+              isDragging: isControlPointDragging,
+              ...enabledEditing && {
+                onEdgePointerDown
+              }
+            }
+          ),
+          enableCompareWithLatest && /* @__PURE__ */ jsx(
+            EdgeDrifts,
+            {
+              edgeProps: props,
+              svgPath: edgePath
+            }
+          ),
+          labelBBox && /* @__PURE__ */ jsx(
+            EdgeLabelContainer,
             {
-              pointerEvents: enabledEditing ? "none" : "all",
               edgeProps: props,
-              children: !enabledEditing && navigateTo && /* @__PURE__ */ jsx(
-                EdgeActionButton,
+              labelPosition: isControlPointDragging ? labelPos : { x: labelX, y: labelY },
+              children: /* @__PURE__ */ jsx(
+                EdgeLabel,
                 {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    diagram.navigateTo(navigateTo);
-                  }
+                  pointerEvents: enabledEditing ? "none" : "all",
+                  edgeProps: props,
+                  children: navigateTo && /* @__PURE__ */ jsx(
+                    EdgeActionButton,
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        diagram.navigateTo(navigateTo);
+                      }
+                    }
+                  )
                 }
               )
             }
           )
-        }
-      )
-    ] }),
-    enabledEditing && controlPoints.length > 0 && (selected || active || hovered || isControlPointDragging) && /* @__PURE__ */ jsx(
+        ]
+      }
+    ),
+    enabledEditing && controlPoints.length > 0 && /* @__PURE__ */ jsx(
       ControlPoints,
       {
+        isControlPointDragging,
         edgeProps: props,
         controlPoints,
         onMove: setControlPoints,
@@ -209,13 +218,14 @@ const RelationshipEdge = memoEdge((props) => {
         onCancelMove: onControlPointerCancelMove,
         onFinishMove: onControlPointerFinishMove,
         onDelete: onControlPointerDelete,
-        zIndex: ZIndexes.Element + 500
+        zIndex: 9999
       }
     )
   ] });
 });
 RelationshipEdge.displayName = "RelationshipEdge";
 function ControlPoints({
+  isControlPointDragging,
   edgeProps,
   controlPoints,
   onMove,
@@ -296,7 +306,7 @@ function ControlPoints({
     }, 10);
   };
   const onControlPointerDown = useCallbackRef((e) => {
-    const { domNode, addSelectedEdges } = xyflowStore.getState();
+    const { domNode, addSelectedEdges, edges, unselectNodesAndEdges } = xyflowStore.getState();
     if (!domNode || e.pointerType !== "mouse") {
       return;
     }
@@ -307,6 +317,9 @@ function ControlPoints({
     switch (e.button) {
       case 0: {
         e.stopPropagation();
+        unselectNodesAndEdges({
+          edges: edges.filter((ed) => ed.selected && ed.id !== edgeId)
+        });
         addSelectedEdges([edgeId]);
         onLmbControlPointerDown(index, e, domNode);
         break;
@@ -316,6 +329,17 @@ function ControlPoints({
         break;
     }
   });
+  const onControlPointerDblClick = useCallbackRef((e) => {
+    const { domNode } = xyflowStore.getState();
+    if (!domNode || e.pointerType !== "mouse") {
+      return;
+    }
+    const index = parseFloat(e.currentTarget.getAttribute("data-control-point-index") || "");
+    if (isNaN(index)) {
+      throw new Error("data-control-point-index is not a number");
+    }
+    onRmbControlPointerDown(index, e);
+  });
   return /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
     EdgeContainer,
     {
@@ -329,16 +353,18 @@ function ControlPoints({
       children: /* @__PURE__ */ jsx(
         "g",
         {
+          "data-active": isControlPointDragging ? true : void 0,
+          className: "group",
           onContextMenu: stopAndPrevent,
           children: controlPoints.map((p, i) => /* @__PURE__ */ jsx(
             "circle",
             {
               "data-control-point-index": i,
               onPointerDownCapture: onControlPointerDown,
+              onDoubleClick: onControlPointerDblClick,
               className: cx("nodrag nopan", controlPoint),
               cx: p.x,
-              cy: p.y,
-              r: 3
+              cy: p.y
             },
             "controlPoints" + edgeId + "#" + i
           ))

package/dist/likec4diagram/custom/edges/edges.css.d.ts

@@ -1,3 +1,2 @@
 export declare const controlPointsContainer: string;
 export declare const controlPoint: string;
-export declare const controlDragging: string;

package/dist/likec4diagram/custom/edges/edges.css.js

@@ -6,38 +6,44 @@ const controlPointsContainer = css({
   pointerEvents: "none",
   top: "0",
   left: "0",
-  mixBlendMode: "normal"
+  mixBlendMode: {
+    _dark: "screen",
+    _light: "multiply"
+  }
 });
 const controlPoint = css({
-  fill: `var(--likec4-palette-relation-stroke)`,
-  stroke: `var(--likec4-palette-relation-stroke)`,
-  fillOpacity: 0.75,
-  strokeWidth: 1,
+  fill: `[var(--xy-edge-stroke)]`,
+  stroke: `transparent`,
+  fillOpacity: 0.5,
+  strokeWidth: 10,
+  r: 4,
   cursor: "grab",
-  pointerEvents: "auto",
+  pointerEvents: "all",
   visibility: "hidden",
-  _hover: {
-    fillOpacity: 1,
-    stroke: "mantine.colors.primary.filledHover",
-    strokeWidth: 18,
-    transition: "stroke 100ms ease-out, stroke-width 100ms ease-out"
-  },
+  transitionDuration: "120ms",
+  transitionProperty: "visibility, fill, fill-opacity, r",
+  transitionTimingFunction: "inOut",
+  transitionDelay: "20ms",
   [`:where([data-likec4-selected='true'], [data-likec4-hovered='true']) &`]: {
     visibility: "visible",
-    transition: "fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out",
-    transitionDelay: "50ms",
     fillOpacity: 1,
-    strokeWidth: 12
-  }
-});
-const controlDragging = css({
-  cursor: "grabbing",
-  "& *": {
-    cursor: "grabbing !important"
+    transitionTimingFunction: "out",
+    transitionDelay: "0ms"
+  },
+  [`:where([data-likec4-selected='true']) &`]: {
+    r: 6
+  },
+  [`:is([data-likec4-hovered='true']) &`]: {
+    r: 8
+  },
+  _hover: {
+    fill: "mantine.colors.primary.filledHover",
+    r: 10,
+    transitionDuration: "100ms"
   },
-  "& .react-flow__edge-interaction": {
-    cursor: "grabbing !important"
+  _groupActive: {
+    cursor: "grabbing"
   }
 });
 
-export { controlDragging, controlPoint, controlPointsContainer };
+export { controlPoint, controlPointsContainer };

package/dist/likec4diagram/custom/edges/useControlPoints.js

@@ -2,7 +2,7 @@ import { deepEqual } from 'fast-equals';
 import { useState } from 'react';
 import { useCallbackRef } from '../../../hooks/useCallbackRef.js';
 import { useUpdateEffect } from '../../../hooks/useUpdateEffect.js';
-import { vector } from '../../../utils/vector.js';
+import { vector } from '@likec4/core/geometry';
 import { bezierControlPoints } from '../../../utils/xyflow.js';
 
 function useControlPoints({
@@ -36,7 +36,7 @@ function useControlPoints({
     for (let i = 0; i < points.length - 1; i++) {
       const a = points[i], b = points[i + 1], fromCurrentToNext = b.subtract(a), fromCurrentToNew = newPointV.subtract(a), fromNextToNew = newPointV.subtract(b);
       if (fromCurrentToNext.dot(fromCurrentToNew) * fromCurrentToNext.dot(fromNextToNew) < 0) {
-        const distanceToEdge = Math.abs(fromCurrentToNext.cross(fromCurrentToNew).length() / fromCurrentToNext.length());
+        const distanceToEdge = Math.abs(fromCurrentToNext.cross(fromCurrentToNew)) / fromCurrentToNext.length();
         if (distanceToEdge < minDistance) {
           minDistance = distanceToEdge;
           insertionIndex = i;

package/dist/likec4diagram/custom/nodes/ElementActions.js

@@ -5,8 +5,8 @@ import { hasAtLeast } from 'remeda';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import '@xstate/react';
 import { useDiagram } from '../../../hooks/safeContext.js';
-import IconZoomScan from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
-import IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.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 IconTransform from '../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
 import { ElementActionButtons } from '../../../base-primitives/element/ElementActionButtons.js';
 
 const compareElementActionsProps = (a, b) => {

package/dist/likec4diagram/custom/nodes/NodeDrifts.js

@@ -17,17 +17,12 @@ function NodeDrifts({
     {
       className: "likec4-node-drifts",
       css: {
-        position: "absolute",
-        inset: "0",
-        pointerEvents: "none",
+        display: "contents",
         "& + .likec4-element-shape": {
           outlineColor: "likec4.compare.manual.outline",
-          outlineWidth: {
-            base: "2px",
-            _light: "4px"
-          },
-          outlineStyle: "solid",
-          outlineOffset: "1"
+          outlineWidth: "4px",
+          outlineStyle: "dashed",
+          outlineOffset: "1.5"
         }
       },
       children: /* @__PURE__ */ jsx(NodeToolbar, { isVisible: data.hovered === true, align: "start", position: toolbarPosition, children: /* @__PURE__ */ jsx(

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

@@ -78,12 +78,9 @@ function DeploymentNode(props) {
 }
 const compoundHasDrifts = css({
   outlineColor: "likec4.compare.manual.outline",
-  outlineWidth: {
-    base: "2px",
-    _light: "4px"
-  },
-  outlineStyle: "solid",
-  outlineOffset: "1"
+  outlineWidth: "4px",
+  outlineStyle: "dashed",
+  outlineOffset: "1.5"
 });
 const hasDrifts = (props) => {
   return props.data.drifts && props.data.drifts.length > 0;

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

@@ -7,8 +7,8 @@ import { GoToSourceButton, BrowseRelationshipsButton } from './_shared.js';
 import { ColorButton } from './ColorButton.js';
 import { Toolbar } from './Toolbar.js';
 import { useHandlers } from './useHandlers.js';
-import IconSelector from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
-import IconCheck from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
+import IconSelector from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js';
+import IconCheck from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js';
 
 function ElementToolbar(props) {
   const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures();

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

@@ -5,8 +5,8 @@ import 'fast-equals';
 import 'react';
 import { useDiagram } from '../../../../hooks/safeContext.js';
 import { useDiagramEventHandlers } from '../../../../context/DiagramEventHandlers.js';
-import IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
-import IconTransform from '../../../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
+import IconFileSymlink from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
+import IconTransform from '../../../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js';
 
 const Tooltip = Tooltip$1.withProps({
   color: "dark",