likec4 1.11.0 → 1.12.1

package/dist/__app__/react/likec4.tsx

@@ -11,7 +11,7 @@ import {
 import { memo, type PropsWithChildren, useCallback, useState } from 'react'
 import { Icons } from 'virtual:likec4/icons'
 import type { DiagramView, LikeC4ElementKind, LikeC4Tag, LikeC4ViewId } from 'virtual:likec4/model'
-import { likec4model as likeC4Model, LikeC4Views, useLikeC4ModelAtom } from 'virtual:likec4/model'
+import { likec4model as likeC4Model, LikeC4Views, useLikeC4ModelAtom as useLikeC4Model } from 'virtual:likec4/model'
 
 type IconRendererProps = {
   node: {
@@ -26,16 +26,12 @@ export function RenderIcon({ node }: IconRendererProps) {
   return IconComponent ? <IconComponent /> : null
 }
 
-export { likeC4Model, LikeC4Views }
-
-export function useLikeC4Model() {
-  return useLikeC4ModelAtom()
-}
+export { likeC4Model, LikeC4Views, useLikeC4Model }
 
 export const useLikeC4ViewModel = (viewId: LikeC4ViewId): LikeC4Model.Layouted.ViewModel =>
-  useLikeC4ModelAtom().view(viewId)
+  useLikeC4Model().view(viewId)
 
-export const useLikeC4View = (viewId: LikeC4ViewId): DiagramView => useLikeC4ModelAtom().view(viewId).view as any
+export const useLikeC4View = (viewId: LikeC4ViewId): DiagramView => useLikeC4Model().view(viewId).view as any
 
 export type LikeC4ViewProps = BaseLikeC4ViewProps<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>
 
@@ -66,7 +62,7 @@ const NotFound = ({ viewId }: { viewId: string }) => (
 )
 
 export function LikeC4ModelProvider({ children }: PropsWithChildren) {
-  const likeC4Model = useLikeC4ModelAtom()
+  const likeC4Model = useLikeC4Model()
   return (
     <GenericLikeC4ModelProvider likec4model={likeC4Model}>
       {children}
@@ -91,6 +87,7 @@ const LikeC4ViewMemo = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4View
   browserClassName,
   browserStyle,
   mantineTheme,
+  styleNonce,
   ...props
 }) {
   const view = LikeC4Views[viewId]
@@ -134,6 +131,7 @@ const LikeC4ViewMemo = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4View
         showRelationshipDetails={showRelationshipDetails}
         where={where}
         mantineTheme={mantineTheme}
+        styleNonce={styleNonce}
         {...props}
       />
       {browserView && (
@@ -149,13 +147,13 @@ const LikeC4ViewMemo = /* @__PURE__ */ memo<LikeC4ViewProps>(function LikeC4View
           className={browserClassName}
           style={browserStyle}
           mantineTheme={mantineTheme}
+          styleNonce={styleNonce}
         />
       )}
     </LikeC4ModelProvider>
   )
 })
 LikeC4ViewMemo.displayName = 'LikeC4ViewMemo'
-export { LikeC4ViewMemo as LikeC4View }
 
 export type ReactLikeC4Props =
   & Omit<GenericReactLikeC4Props<LikeC4ViewId, LikeC4Tag, LikeC4ElementKind>, 'view' | 'renderIcon'>
@@ -163,7 +161,7 @@ export type ReactLikeC4Props =
     viewId: LikeC4ViewId
   }
 
-export function ReactLikeC4({ viewId, ...props }: ReactLikeC4Props) {
+const ReactLikeC4Memo = /* @__PURE__ */ memo<ReactLikeC4Props>(function ReactLikeC4({ viewId, ...props }) {
   const view = LikeC4Views[viewId]
   if (!view) {
     return <NotFound viewId={viewId} />
@@ -177,4 +175,7 @@ export function ReactLikeC4({ viewId, ...props }: ReactLikeC4Props) {
       />
     </LikeC4ModelProvider>
   )
-}
+})
+ReactLikeC4Memo.displayName = 'ReactLikeC4Memo'
+
+export { LikeC4ViewMemo as LikeC4View, ReactLikeC4Memo as ReactLikeC4 }

package/dist/__app__/src/chunks/{-index-overview-B8AbCuYt.js → -index-overview-BCq3uZl4.js}

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useOverviewGraph } from "virtual:likec4/overview-graph";
-import { u, c as createReactComponent, I as IconFolderFilled, e, a as useUpdateEffect, n as nonexhaustive } from "./main-OEl3ruxE.js";
-import { u as useRouter } from "./tanstack-router-Mzh8n5Lx.js";
-import { B as BaseEdge, H as Handle, P as Position, u as useNodesState, a as useEdgesState, i as index, b as Background, c as BackgroundVariant } from "./likec4-DOemzWvz.js";
+import { u, c as createReactComponent, I as IconFolderFilled, e, a as useUpdateEffect, n as nonexhaustive } from "./main-TBVrmxK9.js";
+import { u as useRouter } from "./tanstack-router-COsz5nw6.js";
+import { B as BaseEdge, H as Handle, P as Position, u as useNodesState, a as useEdgesState, i as index, b as Background, c as BackgroundVariant } from "./likec4-CNg5BLwi.js";
 import { memo, useRef, useMemo } from "react";
-import { P as Paper, c as clsx, G as Group, T as ThemeIcon, a as Text, C as Card, b as CardSection, d as Center, I as Image, B as Box, u as useMantineColorScheme } from "./mantine-BqgMLMPH.js";
+import { P as Paper, c as clsx, G as Group, T as ThemeIcon, a as Text, C as Card, b as CardSection, d as Center, I as Image, B as Box, u as useMantineColorScheme } from "./mantine-CDAXKBgY.js";
 import { usePreviewUrl } from "virtual:likec4/previews";
 function a(...n) {
   return u(c, n);
@@ -15,14 +15,14 @@ function c(n, r) {
   return o;
 }
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
 var IconLoader = createReactComponent("outline", "loader", "IconLoader", [["path", { d: "M12 6l0 -3", key: "svg-0" }], ["path", { d: "M16.25 7.75l2.15 -2.15", key: "svg-1" }], ["path", { d: "M18 12l3 0", key: "svg-2" }], ["path", { d: "M16.25 16.25l2.15 2.15", key: "svg-3" }], ["path", { d: "M12 18l0 3", key: "svg-4" }], ["path", { d: "M7.75 16.25l-2.15 2.15", key: "svg-5" }], ["path", { d: "M6 12l-3 0", key: "svg-6" }], ["path", { d: "M7.75 7.75l-2.15 -2.15", key: "svg-7" }]]);
 /**
- * @license @tabler/icons-react v3.16.0 - MIT
+ * @license @tabler/icons-react v3.19.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.

package/dist/__app__/src/chunks/{likec4-DOemzWvz.js → likec4-CNg5BLwi.js}

@@ -197,13 +197,13 @@ function creator(name) {
 }
 function none() {
 }
-function selector(selector2) {
+function selector$4(selector2) {
   return selector2 == null ? none : function() {
     return this.querySelector(selector2);
   };
 }
 function selection_select(select2) {
-  typeof select2 != "function" && (select2 = selector(select2));
+  typeof select2 != "function" && (select2 = selector$4(select2));
   for (var groups = this._groups, m2 = groups.length, subgroups = new Array(m2), j = 0; j < m2; ++j)
     for (var group = groups[j], n2 = group.length, subgroup = subgroups[j] = new Array(n2), node, subnode, i = 0; i < n2; ++i)
       (node = group[i]) && (subnode = select2.call(node, node.__data__, i, group)) && ("__data__" in node && (subnode.__data__ = node.__data__), subgroup[i] = subnode);
@@ -594,7 +594,7 @@ function constantNull() {
   return null;
 }
 function selection_insert(name, before) {
-  var create2 = typeof name == "function" ? name : creator(name), select2 = before == null ? constantNull : typeof before == "function" ? before : selector(before);
+  var create2 = typeof name == "function" ? name : creator(name), select2 = before == null ? constantNull : typeof before == "function" ? before : selector$4(before);
   return this.select(function() {
     return this.insertBefore(create2.apply(this, arguments), select2.apply(this, arguments) || null);
   });
@@ -1747,7 +1747,7 @@ function transition_remove() {
 }
 function transition_select(select2) {
   var name = this._name, id2 = this._id;
-  typeof select2 != "function" && (select2 = selector(select2));
+  typeof select2 != "function" && (select2 = selector$4(select2));
   for (var groups = this._groups, m2 = groups.length, subgroups = new Array(m2), j = 0; j < m2; ++j)
     for (var group = groups[j], n2 = group.length, subgroup = subgroups[j] = new Array(n2), node, subnode, i = 0; i < n2; ++i)
       (node = group[i]) && (subnode = select2.call(node, node.__data__, i, group)) && ("__data__" in node && (subnode.__data__ = node.__data__), subgroup[i] = subnode, schedule(subgroup[i], name, id2, i, subgroup, get(node, id2)));
@@ -2772,6 +2772,32 @@ function createMarkerIds(edges, { id: id2, defaultColor, defaultMarkerStart, def
     }
   }), markers), []).sort((a, b) => a.id.localeCompare(b.id));
 }
+function getNodeToolbarTransform(nodeRect, viewport, position, offset, align) {
+  let alignmentOffset = 0.5;
+  align === "start" ? alignmentOffset = 0 : align === "end" && (alignmentOffset = 1);
+  let pos = [
+    (nodeRect.x + nodeRect.width * alignmentOffset) * viewport.zoom + viewport.x,
+    nodeRect.y * viewport.zoom + viewport.y - offset
+  ], shift = [-100 * alignmentOffset, -100];
+  switch (position) {
+    case Position.Right:
+      pos = [
+        (nodeRect.x + nodeRect.width) * viewport.zoom + viewport.x + offset,
+        (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y
+      ], shift = [0, -100 * alignmentOffset];
+      break;
+    case Position.Bottom:
+      pos[1] = (nodeRect.y + nodeRect.height) * viewport.zoom + viewport.y + offset, shift[1] = 0;
+      break;
+    case Position.Left:
+      pos = [
+        nodeRect.x * viewport.zoom + viewport.x - offset,
+        (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y
+      ], shift = [-100, -100 * alignmentOffset];
+      break;
+  }
+  return `translate(${pos[0]}px, ${pos[1]}px) translate(${shift[0]}%, ${shift[1]}%)`;
+}
 const defaultOptions = {
   nodeOrigin: [0, 0],
   nodeExtent: infiniteExtent,
@@ -2790,7 +2816,12 @@ function mergeObjects(base, incoming) {
 function updateAbsolutePositions(nodeLookup, parentLookup, options) {
   const _options = mergeObjects(defaultOptions, options);
   for (const node of nodeLookup.values())
-    node.parentId && updateChildNode(node, nodeLookup, parentLookup, _options);
+    if (node.parentId)
+      updateChildNode(node, nodeLookup, parentLookup, _options);
+    else {
+      const positionWithOrigin = getNodePositionWithOrigin(node, _options.nodeOrigin), extent = isCoordinateExtent(node.extent) ? node.extent : _options.nodeExtent, clampedPosition = clampPosition(positionWithOrigin, extent, getNodeDimensions(node));
+      node.internals.positionAbsolute = clampedPosition;
+    }
 }
 function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
   const _options = mergeObjects(adoptUserNodesDefaultOptions, options), tmpLookup = new Map(nodeLookup), selectedNodeZ = _options?.elevateNodesOnSelect ? 1e3 : 0;
@@ -3046,6 +3077,8 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
         nodesBox = rectToBox(rect);
       }
       for (const [id2, dragItem] of dragItems) {
+        if (!nodeLookup.has(id2))
+          continue;
         let nextPosition = { x: x - dragItem.distance.x, y: y - dragItem.distance.y };
         snapToGrid && (nextPosition = snapPosition(nextPosition, snapGrid));
         let adjustedNodeExtent = [
@@ -3101,8 +3134,9 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
       const { domNode: domNode2, nodeDragThreshold, transform: transform2, snapGrid, snapToGrid } = getStoreItems();
       abortDrag = !1, nodeDragThreshold === 0 && startDrag(event), lastPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid }), containerBounds = domNode2?.getBoundingClientRect() || null, mousePosition = getEventPosition(event.sourceEvent, containerBounds);
     }).on("drag", (event) => {
-      const { autoPanOnNodeDrag, transform: transform2, snapGrid, snapToGrid, nodeDragThreshold } = getStoreItems(), pointerPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid });
-      if (event.sourceEvent.type === "touchmove" && event.sourceEvent.touches.length > 1 && (abortDrag = !0), !abortDrag) {
+      const { autoPanOnNodeDrag, transform: transform2, snapGrid, snapToGrid, nodeDragThreshold, nodeLookup } = getStoreItems(), pointerPos = getPointerPosition(event.sourceEvent, { transform: transform2, snapGrid, snapToGrid });
+      if ((event.sourceEvent.type === "touchmove" && event.sourceEvent.touches.length > 1 || // if user deletes a node while dragging, we need to abort the drag to prevent errors
+      nodeId && !nodeLookup.has(nodeId)) && (abortDrag = !0), !abortDrag) {
         if (!autoPanStarted && autoPanOnNodeDrag && dragStarted && (autoPanStarted = !0, autoPan()), !dragStarted) {
           const x = pointerPos.xSnapped - (lastPos.x ?? 0), y = pointerPos.ySnapped - (lastPos.y ?? 0);
           Math.sqrt(x * x + y * y) > nodeDragThreshold && startDrag(event);
@@ -4034,15 +4068,18 @@ const useViewportHelper = () => {
       return { x, y, zoom: zoom2 };
     },
     fitView: (options) => {
-      const { nodeLookup, width, height, minZoom, maxZoom, panZoom } = store.getState(), fitViewNodes = getFitViewNodes(nodeLookup, options);
-      return panZoom ? fitView({
+      const { nodeLookup, minZoom, maxZoom, panZoom, domNode } = store.getState();
+      if (!panZoom || !domNode)
+        return Promise.resolve(!1);
+      const fitViewNodes = getFitViewNodes(nodeLookup, options), { width, height } = getDimensions(domNode);
+      return fitView({
         nodes: fitViewNodes,
         width,
         height,
         minZoom,
         maxZoom,
         panZoom
-      }, options) : Promise.resolve(!1);
+      }, options);
     },
     setCenter: async (x, y, options) => {
       const { width, height, maxZoom, panZoom } = store.getState(), nextZoom = typeof options?.zoom < "u" ? options.zoom : maxZoom, centerX = width / 2 - x * nextZoom, centerY = height / 2 - y * nextZoom;
@@ -5651,16 +5688,6 @@ function useOnViewportChange({ onStart, onChange, onEnd }) {
     store.setState({ onViewportChangeEnd: onEnd });
   }, [onEnd]);
 }
-function useOnSelectionChange({ onChange }) {
-  const store = useStoreApi();
-  useEffect(() => {
-    const nextOnSelectionChangeHandlers = [...store.getState().onSelectionChangeHandlers, onChange];
-    return store.setState({ onSelectionChangeHandlers: nextOnSelectionChangeHandlers }), () => {
-      const nextHandlers = store.getState().onSelectionChangeHandlers.filter((fn) => fn !== onChange);
-      store.setState({ onSelectionChangeHandlers: nextHandlers });
-    };
-  }, [onChange]);
-}
 function useNodesData(nodeIds) {
   return useStore(useCallback((s) => {
     const data = [], isArrayOfIds = Array.isArray(nodeIds), _nodeIds = isArrayOfIds ? nodeIds : [nodeIds];
@@ -5993,11 +6020,45 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
   return jsx("div", { className: cc(["react-flow__resize-control", "nodrag", ...positionClassNames, variant, className]), ref: resizeControlRef, style: controlStyle, children: children2 });
 }
 memo(ResizeControl);
+const selector = (state) => state.domNode?.querySelector(".react-flow__renderer");
+function NodeToolbarPortal({ children: children2 }) {
+  const wrapperRef = useStore(selector);
+  return wrapperRef ? createPortal(children2, wrapperRef) : null;
+}
+const nodeEqualityFn = (a, b) => a?.internals.positionAbsolute.x !== b?.internals.positionAbsolute.x || a?.internals.positionAbsolute.y !== b?.internals.positionAbsolute.y || a?.measured.width !== b?.measured.width || a?.measured.height !== b?.measured.height || a?.selected !== b?.selected || a?.internals.z !== b?.internals.z, nodesEqualityFn = (a, b) => {
+  if (a.size !== b.size)
+    return !1;
+  for (const [key, node] of a)
+    if (nodeEqualityFn(node, b.get(key)))
+      return !1;
+  return !0;
+}, storeSelector = (state) => ({
+  x: state.transform[0],
+  y: state.transform[1],
+  zoom: state.transform[2],
+  selectedNodesCount: state.nodes.filter((node) => node.selected).length
+});
+function NodeToolbar({ nodeId, children: children2, className, style: style2, isVisible, position = Position.Top, offset = 10, align = "center", ...rest }) {
+  const contextNodeId = useNodeId(), nodesSelector2 = useCallback((state) => (Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ""]).reduce((res, id2) => {
+    const node = state.nodeLookup.get(id2);
+    return node && res.set(node.id, node), res;
+  }, /* @__PURE__ */ new Map()), [nodeId, contextNodeId]), nodes = useStore(nodesSelector2, nodesEqualityFn), { x, y, zoom: zoom2, selectedNodesCount } = useStore(storeSelector, shallow$1);
+  if (!(typeof isVisible == "boolean" ? isVisible : nodes.size === 1 && nodes.values().next().value.selected && selectedNodesCount === 1) || !nodes.size)
+    return null;
+  const nodeRect = getInternalNodesBounds(nodes), nodesArray = Array.from(nodes.values()), zIndex = Math.max(...nodesArray.map((node) => node.internals.z + 1)), wrapperStyle2 = {
+    position: "absolute",
+    transform: getNodeToolbarTransform(nodeRect, { x, y, zoom: zoom2 }, position, offset, align),
+    zIndex,
+    ...style2
+  };
+  return jsx(NodeToolbarPortal, { children: jsx("div", { style: wrapperStyle2, className: cc(["react-flow__node-toolbar", className]), ...rest, "data-id": nodesArray.reduce((acc, node) => `${acc}${node.id} `, "").trim(), children: children2 }) });
+}
 export {
   BaseEdge as B,
   Controls as C,
   EdgeLabelRenderer as E,
   Handle as H,
+  NodeToolbar as N,
   Position as P,
   ReactFlowProvider as R,
   useEdgesState as a,
@@ -6005,8 +6066,8 @@ export {
   BackgroundVariant as c,
   useReactFlow as d,
   useStoreApi as e,
-  useNodesData as f,
-  useStore as g,
+  useStore as f,
+  useNodesData as g,
   createWithEqualityFn as h,
   index as i,
   applyNodeChanges as j,
@@ -6016,8 +6077,8 @@ export {
   getBoundsOfRects as n,
   boxToRect as o,
   useStoreWithEqualityFn as p,
-  useOnViewportChange as q,
-  useOnSelectionChange as r,
+  getDefaultExportFromCjs as q,
+  useOnViewportChange as r,
   shallow$1 as s,
   useNodesState as u,
   withSelectorExports as w