likec4 1.22.0 → 1.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "likec4",
-  "version": "1.22.0",
+  "version": "1.22.1",
   "license": "MIT",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -22,10 +22,6 @@
   "exports": {
     ".": {
       "sources": "./src/index.ts",
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      },
       "default": {
         "types": "./dist/index.d.mts",
         "import": "./dist/index.mjs",
@@ -34,10 +30,6 @@
     },
     "./model": {
       "sources": "./src/model/index.ts",
-      "require": {
-        "types": "./dist/model/index.d.cts",
-        "default": "./dist/model/index.cjs"
-      },
       "default": {
         "types": "./dist/model/index.d.mts",
         "import": "./dist/model/index.mjs",
@@ -106,7 +98,7 @@
   },
   "dependencies": {
     "@hpcc-js/wasm-graphviz": "1.7.0",
-    "@likec4/core": "~1.22.0",
+    "@likec4/core": "~1.22.1",
     "@vitejs/plugin-react": "4.3.4",
     "boxen": "^8.0.1",
     "playwright": "1.50.1",
@@ -118,13 +110,13 @@
   },
   "devDependencies": {
     "@fontsource/ibm-plex-sans": "^5.1.1",
-    "@likec4/diagram": "1.22.0",
-    "@likec4/generators": "1.22.0",
-    "@likec4/icons": "1.22.0",
-    "@likec4/language-server": "1.22.0",
-    "@likec4/layouts": "1.22.0",
-    "@likec4/log": "1.22.0",
-    "@likec4/tsconfig": "1.22.0",
+    "@likec4/diagram": "1.22.1",
+    "@likec4/generators": "1.22.1",
+    "@likec4/icons": "1.22.1",
+    "@likec4/language-server": "1.22.1",
+    "@likec4/layouts": "1.22.1",
+    "@likec4/log": "1.22.1",
+    "@likec4/tsconfig": "1.22.1",
     "@mantine/core": "7.16.3",
     "@mantine/hooks": "7.16.3",
     "@mantine/vanilla-extract": "7.16.3",
@@ -161,8 +153,8 @@
     "glob": "^11.0.1",
     "html-to-image": "^1.11.11",
     "json5": "^2.2.3",
+    "ky": "^1.7.5",
     "langium": "3.3.1",
-    "latest-version": "^9.0.0",
     "merge-error-cause": "^5.0.0",
     "mkdirp": "^3.0.1",
     "nano-spawn": "^0.2.0",

package/react/index.js

@@ -22702,12 +22702,12 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
   return jsx("div", { "data-testid": "rf__wrapper", ...rest, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), id: id2, children: jsxs(Wrapper, { nodes, edges, width: width2, height, fitView: fitView2, nodeOrigin, nodeExtent, children: [jsx(GraphView, { onInit, onNodeClick, onEdgeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, deleteKeyCode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent, minZoom, maxZoom, preventScrolling, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, nodeClickDistance, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noDragClassName, noWheelClassName, noPanClassName, rfId, disableKeyboardA11y, nodeExtent, viewport, onViewportChange }), jsx(StoreUpdater, { nodes, edges, defaultNodes, defaultEdges, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, nodesDraggable, nodesConnectable, nodesFocusable, edgesFocusable, edgesReconnectable, elementsSelectable, elevateNodesOnSelect, elevateEdgesOnSelect, minZoom, maxZoom, nodeExtent, onNodesChange, onEdgesChange, snapToGrid, snapGrid, connectionMode, translateExtent, connectOnClick, defaultEdgeOptions, fitView: fitView2, fitViewOptions, onNodesDelete, onEdgesDelete, onDelete, onNodeDragStart, onNodeDrag, onNodeDragStop, onSelectionDrag, onSelectionDragStart, onSelectionDragStop, onMove, onMoveStart, onMoveEnd, noPanClassName, nodeOrigin, rfId, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, onError, connectionRadius, isValidConnection, selectNodesOnDrag, nodeDragThreshold, onBeforeDelete, paneClickDistance, debug: debug2 }), jsx(SelectionListener, { onSelectionChange }), children2, jsx(Attribution, { proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
 }
 var index = fixedForwardRef(ReactFlow);
-const selector$6 = (s2) => {
+const selector$6$1 = (s2) => {
   var _a;
   return (_a = s2.domNode) == null ? void 0 : _a.querySelector(".react-flow__edgelabel-renderer");
 };
 function EdgeLabelRenderer({ children: children2 }) {
-  const edgeLabelRenderer = useStore$1(selector$6);
+  const edgeLabelRenderer = useStore$1(selector$6$1);
   return edgeLabelRenderer ? createPortal(children2, edgeLabelRenderer) : null;
 }
 function useNodesState(initialNodes) {
@@ -24113,6 +24113,8 @@ var IconLayoutAlignTop = createReactComponent("outline", "layout-align-top", "Ic
 var IconLayoutBoardSplit = createReactComponent("outline", "layout-board-split", "IconLayoutBoardSplit", [["path", { d: "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", key: "svg-0" }], ["path", { d: "M4 12h8", key: "svg-1" }], ["path", { d: "M12 15h8", key: "svg-2" }], ["path", { d: "M12 9h8", key: "svg-3" }], ["path", { d: "M12 4v16", key: "svg-4" }]]);
 var IconLayoutCollage = createReactComponent("outline", "layout-collage", "IconLayoutCollage", [["path", { d: "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", key: "svg-0" }], ["path", { d: "M10 4l4 16", key: "svg-1" }], ["path", { d: "M12 12l-8 2", key: "svg-2" }]]);
 var IconLayoutDashboard = createReactComponent("outline", "layout-dashboard", "IconLayoutDashboard", [["path", { d: "M5 4h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1", key: "svg-0" }], ["path", { d: "M5 16h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1", key: "svg-1" }], ["path", { d: "M15 12h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1", key: "svg-2" }], ["path", { d: "M15 4h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1", key: "svg-3" }]]);
+var IconLockOpen2 = createReactComponent("outline", "lock-open-2", "IconLockOpen2", [["path", { d: "M3 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z", key: "svg-0" }], ["path", { d: "M9 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0", key: "svg-1" }], ["path", { d: "M13 11v-4a4 4 0 1 1 8 0v4", key: "svg-2" }]]);
+var IconLock = createReactComponent("outline", "lock", "IconLock", [["path", { d: "M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z", key: "svg-0" }], ["path", { d: "M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0", key: "svg-1" }], ["path", { d: "M8 11v-4a4 4 0 1 1 8 0v4", key: "svg-2" }]]);
 var IconMenu2 = createReactComponent("outline", "menu-2", "IconMenu2", [["path", { d: "M4 6l16 0", key: "svg-0" }], ["path", { d: "M4 12l16 0", key: "svg-1" }], ["path", { d: "M4 18l16 0", key: "svg-2" }]]);
 var IconMenu = createReactComponent("outline", "menu", "IconMenu", [["path", { d: "M4 8l16 0", key: "svg-0" }], ["path", { d: "M4 16l16 0", key: "svg-1" }]]);
 var IconRectangularPrism = createReactComponent("outline", "rectangular-prism", "IconRectangularPrism", [["path", { d: "M21 14.008v-5.018a1.98 1.98 0 0 0 -1 -1.717l-4 -2.008a2.016 2.016 0 0 0 -2 0l-10 5.008c-.619 .355 -1 1.01 -1 1.718v5.018c0 .709 .381 1.363 1 1.717l4 2.008a2.016 2.016 0 0 0 2 0l10 -5.008c.619 -.355 1 -1.01 1 -1.718z", key: "svg-0" }], ["path", { d: "M9 21v-7.5", key: "svg-1" }], ["path", { d: "M9 13.5l11.5 -5.5", key: "svg-2" }], ["path", { d: "M3.5 11l5.5 2.5", key: "svg-3" }]]);
@@ -31151,6 +31153,9 @@ function useDiagram() {
     },
     stopWalkthrough: () => {
       actor.send({ type: "walkthrough.end" });
+    },
+    toggleFeature: (feature, forceValue) => {
+      actor.send({ type: "toggle.feature", feature, ...forceValue !== void 0 && { forceValue } });
     }
   }), [actor]);
 }
@@ -31988,12 +31993,7 @@ const hotkeyActor = fromCallback(({ sendBack }) => {
 });
 function createViewChange(parentContext) {
   const { view, xystore, xyflow: xyflow2 } = parentContext, { nodeLookup } = xystore.getState(), movedNodes = /* @__PURE__ */ new Set();
-  let bounds = {
-    x: 0,
-    y: 0,
-    width: 1,
-    height: 1
-  };
+  let bounds;
   const nodes = l$4([...nodeLookup.values()], (acc, node2) => {
     const dimensions = getNodeDimensions(node2);
     (!isSamePoint(node2.internals.positionAbsolute, node2.data.position) || node2.initialWidth !== dimensions.width || node2.initialHeight !== dimensions.height) && movedNodes.add(node2.id);
@@ -32004,7 +32004,7 @@ function createViewChange(parentContext) {
       width: Math.ceil(dimensions.width),
       height: Math.ceil(dimensions.height)
     };
-    return bounds = getBoundsOfRects(bounds, rect), acc;
+    return bounds = bounds ? getBoundsOfRects(bounds, rect) : rect, acc;
   }, {}), edges = l$4((xyflow2 == null ? void 0 : xyflow2.getEdges()) ?? [], (acc, { source, target, data }) => {
     let controlPoints = data.controlPoints ?? [];
     const sourceOrTargetMoved = movedNodes.has(source) || movedNodes.has(target);
@@ -32031,9 +32031,9 @@ function createViewChange(parentContext) {
       x2: Math.ceil(Math.max(...allX)),
       y2: Math.ceil(Math.max(...allY))
     });
-    return bounds = getBoundsOfRects(bounds, rect), acc;
+    return bounds = bounds ? getBoundsOfRects(bounds, rect) : rect, acc;
   }, {});
-  return {
+  return bounds ?? (bounds = view.bounds), {
     op: "save-manual-layout",
     layout: {
       hash: view.hash,
@@ -32183,13 +32183,21 @@ const diagramMachine = setup({
           };
         });
       });
-    }
+    },
+    updateFeatures: assign(({ event }) => (assertEvent(event, "update.features"), {
+      features: {
+        ...event.features
+      }
+    }))
   }
 }).createMachine({
   initial: "initializing",
   context: ({ input: input2, self: self2, spawn }) => ({
     ...input2,
     features: { ...AllDisabled },
+    toggledFeatures: {
+      enableReadOnly: !0
+    },
     initialized: !1,
     viewportChangedManually: !1,
     lastOnNavigate: null,
@@ -32681,9 +32689,7 @@ const diagramMachine = setup({
       actions: assign(({ event }) => ({ ...event.inputs }))
     },
     "update.features": {
-      actions: assign({
-        features: ({ event }) => event.features
-      })
+      actions: "updateFeatures"
     },
     "update.nodeData": {
       actions: assign(updateNodeData)
@@ -32740,6 +32746,14 @@ const diagramMachine = setup({
     "walkthrough.start": {
       guard: "is dynamic view",
       target: ".walkthrough"
+    },
+    "toggle.feature": {
+      actions: assign({
+        toggledFeatures: ({ context, event }) => ({
+          ...context.toggledFeatures,
+          [`enable${event.feature}`]: event.forceValue ?? !(context.toggledFeatures[`enable${event.feature}`] ?? context.features[`enable${event.feature}`])
+        })
+      })
     }
   },
   exit: [
@@ -32811,7 +32825,7 @@ function DiagramActor({ input: input2, children: children2 }) {
       },
       children: [
         /* @__PURE__ */ jsx(SyncStore, { input: input2 }),
-        children2
+        /* @__PURE__ */ jsx(DiagramActorToggledFeatures, { children: children2 })
       ]
     }
   );
@@ -32826,6 +32840,16 @@ const SyncStore = ({ input: { view, xyedges, xynodes, ...inputs } }) => {
     send({ type: "update.view", view, xyedges, xynodes });
   }, [send, view, xyedges, xynodes]), null;
 };
+function DiagramActorToggledFeatures({ children: children2 }) {
+  const toggledFeatures = useDiagramContext((s2) => s2.toggledFeatures);
+  return /* @__PURE__ */ jsx(
+    DiagramFeatures,
+    {
+      overrides: toggledFeatures,
+      children: children2
+    }
+  );
+}
 function viewToNodesEdge(opts) {
   var _a;
   const {
@@ -36098,7 +36122,7 @@ function RelationshipsBrowser({ actorRef }) {
     initialEdges: []
   }), /* @__PURE__ */ jsx(RelationshipsBrowserActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(LayoutGroup, { id: id2, children: /* @__PURE__ */ jsx(RelationshipsBrowserXYFlow, {}) }) }) }) });
 }
-const selector$5 = (state) => ({
+const selector$6 = (state) => ({
   initialized: state.context.initialized,
   isActive: state.hasTag("active"),
   nodes: state.context.xynodes,
@@ -36110,7 +36134,7 @@ const selector$5 = (state) => ({
     nodes,
     edges
   } = useRelationshipsBrowserState(
-    selector$5,
+    selector$6,
     selectorEq
   );
   return /* @__PURE__ */ jsx(
@@ -37365,7 +37389,7 @@ function RelationshipDetails({ actorRef }) {
     defaultEdges: []
   }), /* @__PURE__ */ jsx(RelationshipDetailsActorContext.Provider, { value: actorRef, children: /* @__PURE__ */ jsx(ReactFlowProvider, { ...initialRef.current, children: /* @__PURE__ */ jsx(RelationshipDetailsInner, {}) }) });
 }
-const selector$4 = (state) => ({
+const selector$5 = (state) => ({
   edgeId: state.context.edgeId,
   view: state.context.view,
   initialized: state.context.initialized
@@ -37374,7 +37398,7 @@ const selector$4 = (state) => ({
     edgeId,
     view,
     initialized
-  } = useRelationshipDetailsState(selector$4), {
+  } = useRelationshipDetailsState(selector$5), {
     edge,
     xynodes,
     xyedges,
@@ -37526,7 +37550,7 @@ function Fallback({ error, resetErrorBoundary }) {
     }
   ) });
 }
-const selector$3 = (s2) => {
+const selector$4 = (s2) => {
   var _a, _b, _c;
   return {
     relationshipsBrowserActor: s2.children.relationshipsBrowser,
@@ -37546,7 +37570,7 @@ const selector$3 = (s2) => {
     viewId,
     fromNode,
     rectFromNode
-  } = useDiagramActorState(selector$3, equals), isMotionReduced = useReducedMotion() ?? !1, isActiveOverlay = !!activeElementDetailsOf || !!relationshipsBrowserActor2 || !!relationshipDetailsActor2;
+  } = useDiagramActorState(selector$4, equals), isMotionReduced = useReducedMotion() ?? !1, isActiveOverlay = !!activeElementDetailsOf || !!relationshipsBrowserActor2 || !!relationshipDetailsActor2;
   useEffect$2(() => {
     !xyflowRendererDom || isMotionReduced || animate(xyflowRendererDom, {
       opacity: isActiveOverlay ? 0.7 : 1,
@@ -38427,7 +38451,7 @@ const Tooltip = Tooltip$4.withProps({
   color: "gray"
 });
 var navigationButtons = "qc0nyw0", panel = "qc0nyw1", actionIconGroup = "qc0nyw2", autolayoutButton = "qc0nyw4", autolayoutIndicator = "qc0nyw5", spacingSliderBody = "qc0nyw6", spacingSliderThumb = "qc0nyw7";
-const selector$2 = (state) => ({
+const selector$3 = (state) => ({
   viewId: state.view.id,
   autoLayout: state.view.autoLayout
 }), ChangeAutoLayoutButton = (props) => {
@@ -38436,7 +38460,7 @@ const selector$2 = (state) => ({
   } = useDiagramEventHandlers(), diagram = useDiagram(), [rootRef, setRootRef] = useState$1(null), [controlsRefs, setControlsRefs] = useState$1({}), {
     autoLayout,
     viewId
-  } = useDiagramContext(selector$2), { ref, hovered: isSpacingHovered } = useHover$1(), setControlRef = (name) => (node2) => {
+  } = useDiagramContext(selector$3), { ref, hovered: isSpacingHovered } = useHover$1(), setControlRef = (name) => (node2) => {
     controlsRefs[name] = node2, setControlsRefs(controlsRefs);
   }, setAutoLayout = (direction) => (event) => {
     event.stopPropagation(), onChange == null || onChange({
@@ -38754,6 +38778,20 @@ const selector$2 = (state) => ({
       "forward"
     )
   ] });
+}, selector$2 = (state) => ({
+  visible: state.features.enableReadOnly !== !0,
+  isReadOnly: state.toggledFeatures.enableReadOnly ?? state.features.enableReadOnly
+}), ToggleReadonly = () => {
+  const { visible: visible2, isReadOnly } = useDiagramContext(selector$2), diagram = useDiagram();
+  return visible2 ? /* @__PURE__ */ jsx(Tooltip, { label: isReadOnly ? "Enable editing" : "Disable editing", children: /* @__PURE__ */ jsx(
+    ActionIcon,
+    {
+      onClick: (e2) => {
+        e2.stopPropagation(), diagram.toggleFeature("ReadOnly");
+      },
+      children: isReadOnly ? /* @__PURE__ */ jsx(IconLock, {}) : /* @__PURE__ */ jsx(IconLockOpen2, {})
+    }
+  ) }) : null;
 }, Controls = memo$2(() => {
   const { viewId, hasLayoutDrift, viewportChanged } = useDiagramContext((c2) => ({
     viewId: c2.view.id,
@@ -38811,6 +38849,7 @@ const selector$2 = (state) => ({
                 children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })
               }
             ) }),
+            enableControls && /* @__PURE__ */ jsx(ToggleReadonly, {}),
             enableControls && hasLayoutDrift && /* @__PURE__ */ jsx(LayoutDriftNotification, { ...portalProps }),
             enableControls && notReadOnly && /* @__PURE__ */ jsxs(Fragment$1, { children: [
               /* @__PURE__ */ jsx(ChangeAutoLayoutButton, { ...portalProps }),
@@ -39331,8 +39370,15 @@ const selectXYProps = (ctx) => ({
   zoomable: ctx.zoomable,
   fitViewPadding: ctx.fitViewPadding,
   enableFitView: ctx.features.enableFitView,
-  enableReadOnly: ctx.features.enableReadOnly
-}), equalsXYProps = (a2, b2) => a2.initialized === b2.initialized && a2.pannable === b2.pannable && a2.zoomable === b2.zoomable && a2.fitViewPadding === b2.fitViewPadding && a2.enableFitView === b2.enableFitView && a2.enableReadOnly === b2.enableReadOnly && shallowEqual(a2.nodes, b2.nodes) && shallowEqual(a2.edges, b2.edges), LikeC4DiagramXYFlow = memo$2(({ background, nodesDraggable, nodesSelectable }) => {
+  enableReadOnly: ctx.features.enableReadOnly,
+  ...!ctx.features.enableFitView && {
+    viewport: {
+      x: -Math.min(ctx.view.bounds.x, 0),
+      y: -Math.min(ctx.view.bounds.y, 0),
+      zoom: 1
+    }
+  }
+}), equalsXYProps = (a2, b2) => a2.initialized === b2.initialized && a2.pannable === b2.pannable && a2.zoomable === b2.zoomable && a2.fitViewPadding === b2.fitViewPadding && a2.enableFitView === b2.enableFitView && a2.enableReadOnly === b2.enableReadOnly && shallowEqual(a2.nodes, b2.nodes) && shallowEqual(a2.edges, b2.edges) && shallowEqual(a2.viewport, b2.viewport), LikeC4DiagramXYFlow = memo$2(({ background, nodesDraggable, nodesSelectable }) => {
   const diagram = useDiagram(), {
     initialized,
     nodes,