@likec4/diagram 1.45.0 → 1.46.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (202) hide show
  1. package/bundle/index.js +2134 -1652
  2. package/dist/LikeC4Diagram.d.ts +1 -1
  3. package/dist/LikeC4Diagram.js +8 -7
  4. package/dist/LikeC4Diagram.props.d.ts +4 -12
  5. package/dist/LikeC4ProjectsProvider.js +8 -4
  6. package/dist/LikeC4View.js +1 -5
  7. package/dist/ReactLikeC4.d.ts +1 -4
  8. package/dist/StaticLikeC4Diagram.js +0 -2
  9. package/dist/base-primitives/NodeHandles.d.ts +2 -1
  10. package/dist/base-primitives/NodeHandles.js +22 -18
  11. package/dist/base-primitives/compound/CompoundActionButton.js +1 -1
  12. package/dist/base-primitives/compound/CompoundDetailsButton.js +1 -1
  13. package/dist/base-primitives/edge/EdgeActionButton.js +1 -1
  14. package/dist/base-primitives/edge/EdgeContainer.d.ts +1 -1
  15. package/dist/base-primitives/edge/EdgeContainer.js +2 -3
  16. package/dist/base-primitives/edge/EdgeLabel.js +16 -16
  17. package/dist/base-primitives/edge/EdgeLabelContainer.d.ts +1 -1
  18. package/dist/base-primitives/edge/EdgeLabelContainer.js +5 -4
  19. package/dist/base-primitives/edge/EdgePath.js +13 -18
  20. package/dist/base-primitives/element/ElementActionButtons.js +1 -1
  21. package/dist/base-primitives/element/ElementDetailsButton.js +1 -1
  22. package/dist/components/ErrorFallback.js +1 -1
  23. package/dist/components/Link.js +2 -2
  24. package/dist/context/DiagramEventHandlers.js +0 -1
  25. package/dist/context/DiagramFeatures.d.ts +1 -1
  26. package/dist/context/DiagramFeatures.js +1 -0
  27. package/dist/context/EnsureMantine.js +2 -1
  28. package/dist/context/IconRenderer.js +6 -6
  29. package/dist/editor/LikeC4EditorProvider.d.ts +22 -0
  30. package/dist/editor/LikeC4EditorProvider.js +12 -0
  31. package/dist/editor/__tests__/fixture.d.ts +205 -0
  32. package/dist/editor/applyChangesToManualLayout.d.ts +8 -0
  33. package/dist/editor/applyChangesToManualLayout.js +182 -0
  34. package/dist/editor/editorActor.actions.d.ts +201 -0
  35. package/dist/editor/editorActor.actions.js +149 -0
  36. package/dist/editor/editorActor.d.ts +653 -0
  37. package/dist/editor/editorActor.js +324 -0
  38. package/dist/editor/hotkeyActor.d.ts +7 -0
  39. package/dist/editor/hotkeyActor.js +19 -0
  40. package/dist/editor/index.d.ts +3 -2
  41. package/dist/editor/useEditorActorLogic.d.ts +565 -0
  42. package/dist/editor/useEditorActorLogic.js +54 -0
  43. package/dist/hooks/safeContext.d.ts +3 -2
  44. package/dist/hooks/safeContext.js +7 -4
  45. package/dist/hooks/useDiagram.d.ts +4 -2
  46. package/dist/hooks/useDiagram.js +19 -8
  47. package/dist/hooks/useDiagramCompareLayout.d.ts +8 -0
  48. package/dist/hooks/useDiagramCompareLayout.js +22 -2
  49. package/dist/index.d.ts +1 -0
  50. package/dist/index.js +1 -0
  51. package/dist/likec4diagram/DiagramXYFlow.js +1 -2
  52. package/dist/likec4diagram/custom/edges/EdgeDrifts.js +1 -5
  53. package/dist/likec4diagram/custom/edges/RelationshipEdge.js +74 -48
  54. package/dist/likec4diagram/custom/edges/edges.css.d.ts +0 -1
  55. package/dist/likec4diagram/custom/edges/edges.css.js +30 -24
  56. package/dist/likec4diagram/custom/edges/useControlPoints.js +2 -2
  57. package/dist/likec4diagram/custom/nodes/ElementActions.js +2 -2
  58. package/dist/likec4diagram/custom/nodes/NodeDrifts.js +4 -9
  59. package/dist/likec4diagram/custom/nodes/nodes.js +3 -6
  60. package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.js +2 -2
  61. package/dist/likec4diagram/custom/nodes/toolbar/_shared.js +2 -2
  62. package/dist/likec4diagram/relationship-popover/RelationshipPopover.js +127 -14
  63. package/dist/likec4diagram/state/DiagramActorProvider.js +63 -71
  64. package/dist/likec4diagram/state/assign.d.ts +4 -1
  65. package/dist/likec4diagram/state/assign.js +11 -8
  66. package/dist/likec4diagram/state/createViewChange.js +13 -9
  67. package/dist/likec4diagram/state/diagram-api.d.ts +20 -2
  68. package/dist/likec4diagram/state/diagram-api.js +58 -44
  69. package/dist/likec4diagram/state/hotkeyActor.d.ts +1 -1
  70. package/dist/likec4diagram/state/hotkeyActor.js +12 -0
  71. package/dist/likec4diagram/state/machine.actions.d.ts +774 -195
  72. package/dist/likec4diagram/state/machine.actions.js +185 -74
  73. package/dist/likec4diagram/state/machine.actions.layout.d.ts +93 -31
  74. package/dist/likec4diagram/state/machine.actions.layout.js +16 -4
  75. package/dist/likec4diagram/state/machine.d.ts +5 -4
  76. package/dist/likec4diagram/state/machine.js +11 -6
  77. package/dist/likec4diagram/state/machine.setup.d.ts +20 -9
  78. package/dist/likec4diagram/state/machine.setup.js +18 -3
  79. package/dist/likec4diagram/state/machine.state.initializing.d.ts +34 -18
  80. package/dist/likec4diagram/state/machine.state.initializing.js +10 -10
  81. package/dist/likec4diagram/state/machine.state.navigating.js +28 -9
  82. package/dist/likec4diagram/state/machine.state.ready.d.ts +1368 -434
  83. package/dist/likec4diagram/state/machine.state.ready.focused.d.ts +363 -39
  84. package/dist/likec4diagram/state/machine.state.ready.focused.js +17 -4
  85. package/dist/likec4diagram/state/machine.state.ready.idle.d.ts +104 -38
  86. package/dist/likec4diagram/state/machine.state.ready.idle.js +14 -5
  87. package/dist/likec4diagram/state/machine.state.ready.js +13 -90
  88. package/dist/likec4diagram/state/machine.state.ready.printing.d.ts +18 -6
  89. package/dist/likec4diagram/state/machine.state.ready.walkthrough.d.ts +204 -31
  90. package/dist/likec4diagram/state/machine.state.ready.walkthrough.js +14 -1
  91. package/dist/likec4diagram/state/types.d.ts +6 -2
  92. package/dist/likec4diagram/state/utils.d.ts +33 -7
  93. package/dist/likec4diagram/state/utils.js +23 -7
  94. package/dist/likec4diagram/ui/notation/NotationPanel.js +3 -3
  95. package/dist/likec4diagram/useLayoutConstraints.js +5 -9
  96. package/dist/navigationpanel/NavigationPanel.js +6 -9
  97. package/dist/navigationpanel/NavigationPanelDropdown.js +7 -7
  98. package/dist/navigationpanel/_common.js +1 -1
  99. package/dist/navigationpanel/comparepanel/CompareActionsMenu.d.ts +3 -1
  100. package/dist/navigationpanel/comparepanel/CompareActionsMenu.js +40 -14
  101. package/dist/navigationpanel/comparepanel/ComparePanelControls.js +6 -4
  102. package/dist/navigationpanel/comparepanel/LayoutTypeSwitcher.js +2 -2
  103. package/dist/navigationpanel/controls/DetailsControls.js +2 -2
  104. package/dist/navigationpanel/controls/LayoutWarning.js +2 -1
  105. package/dist/navigationpanel/controls/NavigationButtons.js +2 -2
  106. package/dist/navigationpanel/controls/OpenSource.js +1 -1
  107. package/dist/navigationpanel/controls/SearchControl.js +2 -2
  108. package/dist/navigationpanel/controls/ToggleReadonly.js +25 -17
  109. package/dist/navigationpanel/dropdown/ProjectsMenu.js +1 -1
  110. package/dist/navigationpanel/editorpanel/CenterCamera.js +1 -1
  111. package/dist/navigationpanel/editorpanel/ChangeAutoLayoutButton.js +1 -1
  112. package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.js +9 -9
  113. package/dist/navigationpanel/editorpanel/ToggleReadonly.js +1 -1
  114. package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js +3 -3
  115. package/dist/navigationpanel/walkthrough/DynamicViewControls.d.ts +66 -66
  116. package/dist/navigationpanel/walkthrough/DynamicViewControls.js +1 -1
  117. package/dist/overlays/Overlays.js +24 -12
  118. package/dist/overlays/element-details/ElementDetailsCard.js +4 -4
  119. package/dist/overlays/element-details/MetadataValue.js +4 -6
  120. package/dist/overlays/element-details/TabPanelDeployments.js +3 -3
  121. package/dist/overlays/element-details/TabPanelRelationships.js +12 -7
  122. package/dist/overlays/element-details/TabPanelStructure.js +1 -1
  123. package/dist/overlays/overlaysActor.js +6 -3
  124. package/dist/overlays/relationship-details/RelationshipDetails.js +3 -3
  125. package/dist/overlays/relationship-details/SelectEdge.js +2 -2
  126. package/dist/overlays/relationship-details/custom/ElementActions.js +3 -3
  127. package/dist/overlays/relationships-browser/RelationshipsBrowser.js +3 -3
  128. package/dist/overlays/relationships-browser/SelectElement.js +2 -2
  129. package/dist/overlays/relationships-browser/custom/ElementActions.js +3 -3
  130. package/dist/search/components/ElementsColumn.js +7 -3
  131. package/dist/search/components/PickView.js +3 -1
  132. package/dist/search/components/SearchByTags.js +1 -1
  133. package/dist/search/components/SearchInput.js +1 -1
  134. package/dist/search/components/ViewsColum.d.ts +3 -1
  135. package/dist/search/components/ViewsColum.js +13 -7
  136. package/dist/shadowroot/styles.css.js +6 -1
  137. package/dist/styles.css2.js +1 -1
  138. package/dist/utils/index.d.ts +2 -2
  139. package/dist/utils/xyflow.d.ts +2 -3
  140. package/dist/utils/xyflow.js +9 -8
  141. package/package.json +17 -17
  142. package/panda.buildinfo.json +59 -77
  143. package/styles-min.css +1 -1
  144. package/styles.css +1 -1
  145. package/dist/base-primitives/edge/edge.css.d.ts +0 -4
  146. package/dist/base-primitives/edge/edge.css.js +0 -71
  147. package/dist/editor/LikeC4EditorContext.d.ts +0 -21
  148. package/dist/likec4diagram/state/syncManualLayoutActor.d.ts +0 -46
  149. package/dist/likec4diagram/state/syncManualLayoutActor.js +0 -309
  150. package/dist/utils/vector.d.ts +0 -86
  151. package/dist/utils/vector.js +0 -127
  152. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/createReactComponent.js +0 -0
  153. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/defaultAttributes.js +0 -0
  154. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js +0 -0
  155. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowDownRight.js +0 -0
  156. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowLeft.js +0 -0
  157. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js +0 -0
  158. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconBolt.js +0 -0
  159. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconBrowser.js +0 -0
  160. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconCheck.js +0 -0
  161. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js +0 -0
  162. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronLeft.js +0 -0
  163. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js +0 -0
  164. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.js +0 -0
  165. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconCylinder.js +0 -0
  166. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconDeviceMobile.js +0 -0
  167. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.js +0 -0
  168. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconExternalLink.js +0 -0
  169. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js +0 -0
  170. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js +0 -0
  171. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.js +0 -0
  172. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconHelpCircle.js +0 -0
  173. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js +0 -0
  174. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js +0 -0
  175. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.js +0 -0
  176. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.js +0 -0
  177. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.js +0 -0
  178. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.js +0 -0
  179. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.js +0 -0
  180. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.js +0 -0
  181. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.js +0 -0
  182. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js +0 -0
  183. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.js +0 -0
  184. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js +0 -0
  185. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js +0 -0
  186. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js +0 -0
  187. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerPlayFilled.js +0 -0
  188. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.js +0 -0
  189. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.js +0 -0
  190. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.js +0 -0
  191. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconRectangularPrism.js +0 -0
  192. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconReorder.js +0 -0
  193. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js +0 -0
  194. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js +0 -0
  195. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconSelector.js +0 -0
  196. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js +0 -0
  197. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.js +0 -0
  198. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconTarget.js +0 -0
  199. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconTransform.js +0 -0
  200. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconUser.js +0 -0
  201. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js +0 -0
  202. /package/dist/node_modules/.pnpm/{@tabler_icons-react@3.35.0_react@19.2.0 → @tabler_icons-react@3.35.0_react@19.2.1}/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js +0 -0
@@ -2,12 +2,11 @@ import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import { VStack } from '@likec4/styles/jsx';
3
3
  import { hstack } from '@likec4/styles/patterns';
4
4
  import { Popover, PopoverTarget } from '@mantine/core';
5
- import { useUpdateEffect } from '@react-hookz/web';
6
5
  import { useActorRef, useSelector } from '@xstate/react';
7
6
  import { LayoutGroup, AnimatePresence } from 'motion/react';
8
7
  import * as m from 'motion/react-m';
9
8
  import { memo, useEffect } from 'react';
10
- import { useDiagramActorRef } from '../hooks/safeContext.js';
9
+ import { useDiagram } from '../hooks/safeContext.js';
11
10
  import { useCurrentView } from '../hooks/useCurrentView.js';
12
11
  import { useOptionalCurrentViewModel } from '../hooks/useCurrentViewModel.js';
13
12
  import { useDiagramContext } from '../hooks/useDiagram.js';
@@ -22,7 +21,7 @@ import { EditorPanel } from './editorpanel/EditorPanel.js';
22
21
  import { ActiveWalkthroughControls } from './walkthrough/ActiveWalkthroughControls.js';
23
22
 
24
23
  const NavigationPanel = memo(() => {
25
- const diagramActor = useDiagramActorRef();
24
+ const diagram = useDiagram();
26
25
  const view = useCurrentView();
27
26
  const viewModel = useOptionalCurrentViewModel();
28
27
  const actorRef = useActorRef(
@@ -36,13 +35,11 @@ const NavigationPanel = memo(() => {
36
35
  );
37
36
  useEffect(() => {
38
37
  const subscription = actorRef.on("navigateTo", (event) => {
39
- if (diagramActor.getSnapshot().context.view.id !== event.viewId) {
40
- diagramActor.send({ type: "navigate.to", viewId: event.viewId });
41
- }
38
+ diagram.navigateTo(event.viewId);
42
39
  });
43
40
  return () => subscription.unsubscribe();
44
- }, [actorRef, diagramActor]);
45
- useUpdateEffect(() => {
41
+ }, [actorRef, diagram]);
42
+ useEffect(() => {
46
43
  actorRef.send({ type: "update.inputs", inputs: { viewModel, view } });
47
44
  }, [viewModel, view]);
48
45
  return /* @__PURE__ */ jsx(
@@ -95,7 +92,7 @@ const NavigationPanelImpl = ({ actor }) => {
95
92
  },
96
93
  opened,
97
94
  position: "bottom-start",
98
- trapFocus: true,
95
+ trapFocus: opened,
99
96
  ...portalProps,
100
97
  clickOutsideEvents: ["pointerdown", "mousedown", "click"],
101
98
  onDismiss: () => actor.send({ type: "dropdown.dismiss" }),
@@ -17,13 +17,13 @@ import { ProjectsMenu } from './dropdown/ProjectsMenu.js';
17
17
  import { useNavigationActor, useNavigationActorSnapshot, useNavigationActorContext, useNavigationActorRef } from './hooks.js';
18
18
  import { breadcrumbTitle } from './styles.css.js';
19
19
  import { useOnDiagramEvent } from '../hooks/useDiagram.js';
20
- import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
21
- import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
22
- import IconDirectionSignFilled from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.js';
23
- import IconStack2 from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
24
- 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';
25
- import IconStarFilled from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.js';
26
- import IconFolderFilled from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.js';
20
+ import IconSearch from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
21
+ import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
22
+ import IconDirectionSignFilled from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconDirectionSignFilled.js';
23
+ import IconStack2 from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
24
+ import IconZoomScan from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
25
+ import IconStarFilled from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStarFilled.js';
26
+ import IconFolderFilled from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFolderFilled.js';
27
27
 
28
28
  const scopedKeydownHandler = createScopedKeydownHandler({
29
29
  siblingSelector: "[data-likec4-focusable]",
@@ -4,7 +4,7 @@ import { navigationPanelActionIcon } from '@likec4/styles/recipes';
4
4
  import { ActionIcon, ThemeIcon, Tooltip as Tooltip$1, Breadcrumbs } from '@mantine/core';
5
5
  import * as m from 'motion/react-m';
6
6
  import { forwardRef } from 'react';
7
- import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
7
+ import IconChevronRight from '../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronRight.js';
8
8
 
9
9
  const Tooltip = Tooltip$1.withProps({
10
10
  color: "dark",
@@ -1,3 +1,5 @@
1
- export declare function CompareActionsMenu({ onResetManualLayout, }: {
1
+ export declare function CompareActionsMenu({ disabled, onApplyLatestToManual, onResetManualLayout, }: {
2
+ disabled?: boolean;
3
+ onApplyLatestToManual?: undefined | (() => void);
2
4
  onResetManualLayout: () => void;
3
5
  }): import("react/jsx-runtime").JSX.Element;
@@ -1,12 +1,15 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
1
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
2
  import { cx } from '@likec4/styles/css';
3
3
  import { Box } from '@likec4/styles/jsx';
4
4
  import { hstack } from '@likec4/styles/patterns';
5
- import { navigationPanelActionIcon } from '@likec4/styles/recipes';
6
- import { Menu, UnstyledButton, Badge } from '@mantine/core';
7
- import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
5
+ import { Menu, UnstyledButton, Tooltip } from '@mantine/core';
6
+ import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
7
+ import { stopPropagation } from '../../utils/xyflow.js';
8
+ import IconInfoCircle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconInfoCircle.js';
8
9
 
9
10
  function CompareActionsMenu({
11
+ disabled = false,
12
+ onApplyLatestToManual,
10
13
  onResetManualLayout
11
14
  }) {
12
15
  return /* @__PURE__ */ jsxs(
@@ -17,27 +20,22 @@ function CompareActionsMenu({
17
20
  shadow: "lg",
18
21
  position: "bottom-start",
19
22
  offset: { mainAxis: 4 },
23
+ disabled,
20
24
  children: [
21
25
  /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsxs(
22
26
  UnstyledButton,
23
27
  {
28
+ disabled,
24
29
  className: cx(
25
30
  "mantine-active",
26
- navigationPanelActionIcon({
27
- variant: "default"
28
- }),
29
31
  hstack({
30
32
  gap: "2",
31
33
  py: "1.5",
32
34
  px: "2",
33
35
  lineHeight: "1",
34
- rounded: "sm",
35
36
  textStyle: "xs",
36
37
  fontWeight: "medium",
37
- color: {
38
- base: "likec4.panel.action",
39
- _hover: "likec4.panel.action.hover"
40
- },
38
+ layerStyle: "likec4.panel.action",
41
39
  userSelect: "none"
42
40
  })
43
41
  ),
@@ -48,8 +46,36 @@ function CompareActionsMenu({
48
46
  }
49
47
  ) }),
50
48
  /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
51
- /* @__PURE__ */ jsx(Menu.Item, { disabled: true, rightSection: /* @__PURE__ */ jsx(Badge, { size: "xs", radius: "sm", children: "Soon" }), children: "Apply changes" }),
52
- /* @__PURE__ */ jsx(Menu.Item, { fz: "sm", onClick: onResetManualLayout, children: "Reset manual layout" })
49
+ /* @__PURE__ */ jsxs(
50
+ Menu.Item,
51
+ {
52
+ disabled: !onApplyLatestToManual,
53
+ onClick: onApplyLatestToManual,
54
+ rightSection: onApplyLatestToManual && /* @__PURE__ */ jsx(
55
+ Tooltip,
56
+ {
57
+ onClick: stopPropagation,
58
+ position: "right-start",
59
+ label: /* @__PURE__ */ jsxs(Fragment, { children: [
60
+ "Applies changes from the latest auto-layouted",
61
+ /* @__PURE__ */ jsx("br", {}),
62
+ "to saved snapshot, preserving (as possible)",
63
+ /* @__PURE__ */ jsx("br", {}),
64
+ "manual adjustments.",
65
+ /* @__PURE__ */ jsx("br", {}),
66
+ /* @__PURE__ */ jsx("br", {}),
67
+ "You can undo this action."
68
+ ] }),
69
+ children: /* @__PURE__ */ jsx(IconInfoCircle, { size: 14, stroke: 1.7, opacity: 0.5 })
70
+ }
71
+ ),
72
+ children: [
73
+ "Sync with latest",
74
+ !onApplyLatestToManual && /* @__PURE__ */ jsx(Box, { textStyle: "xs", children: "view type is changed" })
75
+ ]
76
+ }
77
+ ),
78
+ /* @__PURE__ */ jsx(Menu.Item, { onClick: onResetManualLayout, children: "Remove manual layout" })
53
79
  ] })
54
80
  ]
55
81
  }
@@ -5,7 +5,7 @@ import { useDiagramCompareLayout } from '../../hooks/useDiagramCompareLayout.js'
5
5
  import { PanelActionIcon } from '../_common.js';
6
6
  import { CompareActionsMenu } from './CompareActionsMenu.js';
7
7
  import { LayoutTypeSwitcher } from './LayoutTypeSwitcher.js';
8
- import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
8
+ import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
9
9
 
10
10
  const Divider = Divider$1.withProps({
11
11
  mx: 2,
@@ -13,7 +13,7 @@ const Divider = Divider$1.withProps({
13
13
  orientation: "vertical"
14
14
  });
15
15
  function ComparePanelControls() {
16
- const [ctx, { toggleCompare, switchLayout, resetManualLayout }] = useDiagramCompareLayout();
16
+ const [ctx, { toggleCompare, switchLayout, resetManualLayout, applyLatestToManual }] = useDiagramCompareLayout();
17
17
  return /* @__PURE__ */ jsxs(Fragment, { children: [
18
18
  /* @__PURE__ */ jsx(
19
19
  Box,
@@ -33,12 +33,14 @@ function ComparePanelControls() {
33
33
  onChange: switchLayout
34
34
  }
35
35
  ),
36
- ctx.isEditable && /* @__PURE__ */ jsxs(HStack, { gap: "1", children: [
36
+ ctx.hasEditor && /* @__PURE__ */ jsxs(HStack, { gap: "1", children: [
37
37
  /* @__PURE__ */ jsx(Divider, {}),
38
38
  /* @__PURE__ */ jsx(
39
39
  CompareActionsMenu,
40
40
  {
41
- onResetManualLayout: resetManualLayout
41
+ disabled: ctx.layout === "auto",
42
+ onResetManualLayout: resetManualLayout,
43
+ onApplyLatestToManual: ctx.canApplyLatest ? applyLatestToManual : void 0
42
44
  }
43
45
  ),
44
46
  /* @__PURE__ */ jsx(Divider, {})
@@ -10,8 +10,8 @@ function LayoutTypeSwitcher({
10
10
  onChange
11
11
  }) {
12
12
  const data = useMemo(() => [
13
- { value: "manual", label: "Saved" },
14
- { value: "auto", label: "Latest" }
13
+ { value: "manual", label: "Saved manual" },
14
+ { value: "auto", label: "Latest auto" }
15
15
  ], []);
16
16
  return /* @__PURE__ */ jsx(m.div, { layout: "position", children: /* @__PURE__ */ jsx(
17
17
  SegmentedControl,
@@ -12,8 +12,8 @@ import { Link } from '../../components/Link.js';
12
12
  import { useOnDiagramEvent } from '../../hooks/useDiagram.js';
13
13
  import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
14
14
  import { useNavigationActorSnapshot } from '../hooks.js';
15
- import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
16
- import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
15
+ import IconId from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js';
16
+ import IconLink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLink.js';
17
17
  import { useDiagram } from '../../hooks/safeContext.js';
18
18
  import { ElementTag } from '../../base-primitives/element/ElementTags.js';
19
19
  import { Markdown } from '../../base-primitives/Markdown.js';
@@ -8,7 +8,7 @@ import * as m from 'motion/react-m';
8
8
  import { memo, Fragment as Fragment$1 } from 'react';
9
9
  import { useDiagramCompareLayout } from '../../hooks/useDiagramCompareLayout.js';
10
10
  import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
11
- import IconAlertTriangle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
11
+ import IconAlertTriangle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertTriangle.js';
12
12
 
13
13
  const LayoutWarning = memo(() => {
14
14
  const [ctx, { toggleCompare }] = useDiagramCompareLayout();
@@ -33,6 +33,7 @@ const LayoutWarning = memo(() => {
33
33
  component: m.button,
34
34
  layout: "position",
35
35
  onClick: (e) => {
36
+ e.stopPropagation();
36
37
  toggleCompare();
37
38
  },
38
39
  whileTap: {
@@ -4,8 +4,8 @@ import * as m from 'motion/react-m';
4
4
  import { useDiagramContext } from '../../hooks/useDiagram.js';
5
5
  import { PanelActionIcon } from '../_common.js';
6
6
  import { useDiagram } from '../../hooks/safeContext.js';
7
- import IconArrowLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowLeft.js';
8
- import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
7
+ import IconArrowLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowLeft.js';
8
+ import IconArrowRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowRight.js';
9
9
 
10
10
  const NavigationButtons = () => {
11
11
  const diagram = useDiagram();
@@ -3,7 +3,7 @@ import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
3
3
  import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
4
4
  import { useCurrentViewId } from '../../hooks/useCurrentView.js';
5
5
  import { Tooltip, PanelActionIcon } from '../_common.js';
6
- 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';
6
+ import IconFileSymlink from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFileSymlink.js';
7
7
 
8
8
  const OpenSource = () => {
9
9
  const viewId = useCurrentViewId();
@@ -11,7 +11,7 @@ import '@xstate/react';
11
11
  import 'fast-equals';
12
12
  import { useDiagram } from '../../hooks/safeContext.js';
13
13
  import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
14
- import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
14
+ import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
15
15
 
16
16
  const SearchControl = memo(() => {
17
17
  const { enableSearch, enableCompareWithLatest } = useEnabledFeatures();
@@ -37,7 +37,7 @@ const SearchControl = memo(() => {
37
37
  paddingInline: "sm",
38
38
  paddingBlock: "xxs",
39
39
  userSelect: "none",
40
- layerStyle: "likec4.panel.action",
40
+ layerStyle: "likec4.panel.action.filled",
41
41
  display: {
42
42
  base: "none",
43
43
  "@/md": "flex"
@@ -4,18 +4,27 @@ import { hstack } from '@likec4/styles/patterns';
4
4
  import { UnstyledButton } from '@mantine/core';
5
5
  import { AnimatePresence } from 'motion/react';
6
6
  import * as m from 'motion/react-m';
7
+ import { isTruthy } from 'remeda';
7
8
  import { useDiagramContext } from '../../hooks/useDiagram.js';
9
+ import { deriveToggledFeatures } from '../../likec4diagram/state/machine.setup.js';
8
10
  import { useDiagram } from '../../hooks/safeContext.js';
9
- import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
10
- import IconLock from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
11
+ import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
12
+ import IconLock from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLock.js';
11
13
 
12
- const selector = (ctx) => ({
13
- visible: ctx.features.enableReadOnly !== true && // Disable toggle in sequence mode
14
- (ctx.view._type !== "dynamic" || ctx.dynamicViewVariant !== "sequence"),
15
- isReadOnly: ctx.toggledFeatures.enableReadOnly ?? ctx.features.enableReadOnly
16
- });
14
+ const selector = (ctx) => {
15
+ const toggledFeatures = deriveToggledFeatures(ctx);
16
+ const comparingLatest = toggledFeatures.enableCompareWithLatest && !!ctx.view.drifts && ctx.view._layout === "auto";
17
+ const sequenceLayoutActive = ctx.view._type === "dynamic" && ctx.dynamicViewVariant === "sequence";
18
+ const noActiveWalkthrough = !isTruthy(ctx.activeWalkthrough);
19
+ const hasEditor = ctx.features.enableEditor;
20
+ return {
21
+ visible: hasEditor && noActiveWalkthrough,
22
+ disabled: comparingLatest || sequenceLayoutActive,
23
+ isReadOnly: ctx.toggledFeatures.enableReadOnly ?? false
24
+ };
25
+ };
17
26
  const ToggleReadonly = () => {
18
- const { visible, isReadOnly } = useDiagramContext(selector);
27
+ const { visible, disabled, isReadOnly } = useDiagramContext(selector);
19
28
  const diagram = useDiagram();
20
29
  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: visible && /* @__PURE__ */ jsxs(
21
30
  UnstyledButton,
@@ -23,12 +32,13 @@ const ToggleReadonly = () => {
23
32
  component: m.button,
24
33
  layout: "position",
25
34
  layoutDependency: isReadOnly,
35
+ disabled,
26
36
  onClick: (e) => {
27
37
  e.stopPropagation();
28
- diagram.toggleFeature("ReadOnly");
38
+ !disabled && diagram.toggleFeature("ReadOnly");
29
39
  },
30
40
  initial: { opacity: 0, scale: 0.6 },
31
- animate: { opacity: 1, scale: 1 },
41
+ animate: { opacity: 1, scale: disabled ? 0.95 : 1 },
32
42
  exit: { opacity: 0, scale: 0.6 },
33
43
  whileTap: {
34
44
  translateY: 1
@@ -39,15 +49,13 @@ const ToggleReadonly = () => {
39
49
  gap: "0.5",
40
50
  paddingInline: "xxs",
41
51
  paddingBlock: "xxs",
42
- rounded: "sm",
43
52
  userSelect: "none",
44
- cursor: "pointer",
45
- color: {
46
- base: "likec4.panel.action",
47
- _hover: "likec4.panel.action.hover"
48
- },
53
+ layerStyle: "likec4.panel.action",
49
54
  backgroundColor: {
50
- _hover: "likec4.panel.action.bg.hover"
55
+ base: "none",
56
+ _notDisabled: {
57
+ _hover: "likec4.panel.action.bg.hover"
58
+ }
51
59
  }
52
60
  })
53
61
  ),
@@ -4,7 +4,7 @@ import { HStack, Box } from '@likec4/styles/jsx';
4
4
  import { Menu, MenuTarget, Button, MenuDropdown, MenuItem } from '@mantine/core';
5
5
  import { memo } from 'react';
6
6
  import { useLikeC4ProjectsContext, useLikeC4ProjectId } from '../../hooks/useLikeC4Project.js';
7
- import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
7
+ import IconChevronDown from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconChevronDown.js';
8
8
 
9
9
  const ProjectsMenu = memo((_) => {
10
10
  const { projects, onProjectChange } = useLikeC4ProjectsContext();
@@ -5,7 +5,7 @@ import 'react';
5
5
  import { useDiagram } from '../../hooks/safeContext.js';
6
6
  import { PanelActionIcon } from '../_common.js';
7
7
  import { Tooltip } from './_common.js';
8
- import IconFocusCentered from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js';
8
+ import IconFocusCentered from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js';
9
9
 
10
10
  const CenterCamera = () => {
11
11
  const diagram = useDiagram();
@@ -8,7 +8,7 @@ import { PanelActionIcon } from '../_common.js';
8
8
  import { Tooltip } from './_common.js';
9
9
  import { autolayoutIndicator, autolayoutButton, spacingSliderBody, spacingSliderThumb } from './styles.js';
10
10
  import { useDiagram } from '../../hooks/safeContext.js';
11
- import IconLayoutDashboard from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.js';
11
+ import IconLayoutDashboard from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.js';
12
12
 
13
13
  const selector = (state) => ({
14
14
  viewId: state.view.id,
@@ -9,15 +9,15 @@ import { useDiagram } from '../../hooks/safeContext.js';
9
9
  import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
10
10
  import { PanelActionIcon } from '../_common.js';
11
11
  import { Tooltip } from './_common.js';
12
- import IconLayoutCollage from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js';
13
- import IconLayoutBoardSplit from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.js';
14
- import IconLayoutAlignLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.js';
15
- import IconLayoutAlignCenter from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.js';
16
- import IconLayoutAlignRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.js';
17
- import IconLayoutAlignTop from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.js';
18
- import IconLayoutAlignMiddle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.js';
19
- import IconLayoutAlignBottom from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.js';
20
- import IconRouteOff from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js';
12
+ import IconLayoutCollage from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutCollage.js';
13
+ import IconLayoutBoardSplit from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutBoardSplit.js';
14
+ import IconLayoutAlignLeft from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignLeft.js';
15
+ import IconLayoutAlignCenter from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignCenter.js';
16
+ import IconLayoutAlignRight from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignRight.js';
17
+ import IconLayoutAlignTop from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignTop.js';
18
+ import IconLayoutAlignMiddle from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignMiddle.js';
19
+ import IconLayoutAlignBottom from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutAlignBottom.js';
20
+ import IconRouteOff from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js';
21
21
 
22
22
  const Action = ({
23
23
  label,
@@ -5,7 +5,7 @@ import 'react';
5
5
  import { useDiagram } from '../../hooks/safeContext.js';
6
6
  import { PanelActionIcon } from '../_common.js';
7
7
  import { Tooltip } from './_common.js';
8
- import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
8
+ import IconLockOpen2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconLockOpen2.js';
9
9
 
10
10
  const ToggleReadonly = () => {
11
11
  const diagram = useDiagram();
@@ -8,9 +8,9 @@ import { isTruthy } from 'remeda';
8
8
  import { useDiagramContext } from '../../hooks/useDiagram.js';
9
9
  import { TriggerWalkthroughButton } from './DynamicViewControls.js';
10
10
  import { useDiagram } from '../../hooks/safeContext.js';
11
- import IconPlayerStopFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.js';
12
- import IconPlayerSkipBackFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.js';
13
- import IconPlayerSkipForwardFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.js';
11
+ import IconPlayerStopFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerStopFilled.js';
12
+ import IconPlayerSkipBackFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipBackFilled.js';
13
+ import IconPlayerSkipForwardFilled from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.1/node_modules/@tabler/icons-react/dist/esm/icons/IconPlayerSkipForwardFilled.js';
14
14
  import { useMantinePortalProps } from '../../hooks/useMantinePortalProps.js';
15
15
 
16
16
  const PrevNextButton = Button.withProps({