likec4 1.12.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-Csz814YU.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-Bc_PC5BH.js";
-import { u as useRouter } from "./tanstack-router-CU5V4Ll-.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-DlkyDuSp.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-IOl1S4mZ.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);

package/dist/__app__/src/chunks/{likec4-DlkyDuSp.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,
@@ -5662,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];
@@ -6004,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,
@@ -6016,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,
@@ -6030,7 +6080,6 @@ export {
   getDefaultExportFromCjs as q,
   useOnViewportChange as r,
   shallow$1 as s,
-  useOnSelectionChange as t,
   useNodesState as u,
   withSelectorExports as w
 };