@canmingir/link 1.2.39 → 1.2.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.39",
+  "version": "1.2.41",
   "type": "module",
   "exports": {
     ".": "./index.js",

package/src/lib/Flow/core/Flow.jsx

@@ -58,7 +58,7 @@ export const Flow = ({
       .filter(Boolean);
 
     return children.length > 0
-      ? { id: "__root__", label: "Start", children }
+      ? { id: "__root__", label: "Start", virtual: true, children }
       : null;
   }, [nodesById, roots]);
 

package/src/lib/Flow/core/FlowViewport.jsx

@@ -26,10 +26,12 @@ const FlowViewport = ({
   const [zoom, setZoom] = useState(1);
   const [isDragging, setIsDragging] = useState(false);
   const [selectionBox, setSelectionBox] = useState(null);
+  const [shouldCenter, setShouldCenter] = useState(true);
 
   const containerRef = useRef(null);
   const selectionBoxRef = useRef(null);
   const mousePositionRef = useRef({ x: 0, y: 0 });
+  const innerRef = useRef(null);
 
   const {
     clearSelection,
@@ -40,6 +42,28 @@ const FlowViewport = ({
     selectedIds,
   } = useSelection();
 
+  useEffect(() => {
+    const container = containerRef.current;
+    const inner = innerRef.current;
+    if (!container || !inner) return;
+
+    const observer = new ResizeObserver(() => {
+      const contentWidth = inner.scrollWidth;
+      const contentHeight = inner.scrollHeight;
+      const containerWidth = container.clientWidth;
+      const containerHeight = container.clientHeight;
+
+      const exceeds =
+        contentWidth > containerWidth || contentHeight > containerHeight;
+      setShouldCenter(!exceeds);
+    });
+
+    observer.observe(inner);
+    observer.observe(container);
+
+    return () => observer.disconnect();
+  }, []);
+
   useEffect(() => {
     const handleMouseMove = (e) => {
       mousePositionRef.current = { x: e.clientX, y: e.clientY };
@@ -252,6 +276,7 @@ const FlowViewport = ({
     >
       <SelectionOverlay box={selectionBox} selectionColor={selectionColor} />
       <Box
+        ref={innerRef}
         sx={{
           transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom})`,
           transformOrigin: "center center",
@@ -259,7 +284,7 @@ const FlowViewport = ({
           height: height,
           display: "flex",
           alignItems: "center",
-          justifyContent: variant === "horizontal" ? "flex-start" : "center",
+          justifyContent: shouldCenter ? "center" : "flex-start",
           transition: isDragging ? "none" : "transform 0.1s ease-out",
           pointerEvents: "auto",
           position: "relative",

package/src/lib/Flow/nodes/FlowNodeView.jsx

@@ -20,6 +20,7 @@ const FlowNodeView = ({
   onConnect,
 }) => {
   const hasChildren = Array.isArray(node.children) && node.children.length > 0;
+  const isVirtualRoot = !!node.virtual;
 
   const {
     baseStyle,
@@ -146,6 +147,36 @@ const FlowNodeView = ({
     );
   };
 
+  if (isVirtualRoot) {
+    return (
+      <Box
+        ref={containerRef}
+        sx={{
+          display: "flex",
+          flexDirection: isHorizontal ? "row" : "column",
+          alignItems: "flex-end",
+          gap,
+          position: "relative",
+        }}
+      >
+        {node.children.map((child) => (
+          <FlowNode
+            key={child.id}
+            node={child}
+            type={type}
+            variant={variant}
+            style={style}
+            plugin={plugin}
+            registerRef={(el) => (childRefs.current[child.id] = el)}
+            onDrag={() => setConnectorTick((t) => t + 1)}
+            isRoot={false}
+            onConnect={onConnect}
+          />
+        ))}
+      </Box>
+    );
+  }
+
   return (
     <Box
       ref={containerRef}

package/src/theme/overrides/components/fab.js

@@ -157,6 +157,9 @@ export function fab(theme) {
 
   return {
     MuiFab: {
+      defaultProps: {
+        size: "small",
+      },
       styleOverrides: {
         root: ({ ownerState }) => rootStyles(ownerState),
       },